原生AJAX
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
认识Ajax 认识Ajax
6：处理服务器返回的信息 首先根据XMLHttpRequest的readyState的值，如果是文本， 通过 responseText进行获取，如下： if(myRequest.readyState==4) { var ret = myRequest.responseText; //接下来处理返回的值，主要使用javascript }
第二部分: 第二部分 HelloWorld示例 示例
AJAX请求页面-1
<%@ page contentType=“text/html;charset=utf-8”%> <html> <head> <meta http-equiv=“Content-Type” content=“text/html;charset=utf-8” > </head> <script language=“javascript”> var myRequest = null ; function test() { //准备数据 准备数据 var userId = document.all(“userId”).value; //////////AJAX begin------->///////// myRequest = new ActiveXObject(“Msxml2.XMLHTTP”); myRequest.onreadystatechange = t2 ; myRequest.open(“get”,”b.jsp?userId=”+userId,true) ; myRequest.send(null) ; } </script> </html>
作为字符串返回完整的 Headers 作为字符串返回单个的 Header标签 设置未决的请求的目标URL， 方法和其他的参数 发送请求 设置Header并和请求一起发 送
send(content) setRequestHeader(“label”,”value”)
认识Ajax 认识Ajax
4：指定响应处理函数(回调函数) myRequest.onreadystatechange = t2; function t2() {} 5：发出http请求 myRequest.open(“GET”,”b.jsp?id=”+userId,true) ; myRequest.send(null) ; open的第一个参数: 是指http请求的方法，get,post或head open的第二个参数: 是目标URL,只能是当前应用内的URL open的第三个参数: 指定在等待服务器返回信息的时间内是否继续执行 下面的代码，如果为true(同步调用), 则不会继续执行，默认为true 调用完open后，接着调用send方法，真正的提交。如果需要传递文件， 需要先setRequestHeader方法，修改MIME类型，如下： myRequest.setRequestHeader(“Content-Type”,”application/msexcel”);
总结
认识什么是Ajax 掌握原生Ajax的编写
作业
复习题：
预习题：
responseText
responseXML status statusText
认识Ajax 认识Ajax
3：XMLHttpRequest对象的方法
方法
abort()
描述
停止当前请求
getAllResponseHeaders() getResponseHeader(“headerLabel”) open(“method”,”URL”[,asyncFlag[,”userna me”[,”password”]]])
A B C D
F Struts F HIB F SS F SSH
HTML HTML HTML HTML sHTML/JSP HTML/JSP HTML/JSP HTML/JSP JSP JSP Servlet Servlet Servlet Servlet
Servlet JSP Servlet javaBean Action Bean Action Bean
学习本科目的目的和意义(WHY)： ： 学习本科目的目的和意义 本课程用于制作web应用程序的特效 应用程序的特效 本课程用于制作 实现客户端与服务器的异步交互
本科目在课程体系中地位
课程定位
Java 语言 视图层 （界面/外观） 控制层 （验证/调度） SQL 语言 模式层 （处理/反馈） 持久化层 （操作/事务） 数据存 储系统
DAO/JDBC JDBC DAO/JDBC DAO/JDBC DAO/JDBC PO/hibernate
Spring/DAO Spring hibernate
第一章
原生Ajax
课程目标
理解原生AJAX 能够动手写简单的Ajax应用
认识Ajax 认识Ajax
Ajax是什么
AJAX是“Asynchronous JavaScript And Xml” 的首字母缩写，表示：异步 Javascript 和 Xml。 Ajax是一种在网络应用中实现异步通讯和数据交换的技术。其实是多种技 术的综合，包括：JavaScript、XHTML、CSS、XML、DOM、XSLT和 XMLHttpRequest等技术。没有提出AJAX的时候，上述技术只是单独使用， 有了AJAX的时候，他们就可以协作起来，实现更多的功能。 事实上，AJAX并没有新技术，其实是把一堆的老技术进行整合，焕发出新 的青春，实现新的功能而已。
AJAX就是由前面所提到的一堆技术的集合，其中 XMLHttpRequest就是AJAX用来实现异步通讯的核心技术，下面重 点来说说XMLHttpRequest。 1：如何初始化XMLHttpRequest对象 <script lanaguage=“javascript”> var myRequest ; //IE浏览器之一 myRequest = new ActiveXObject(“Msxml2.XMLHTTP”); //IE浏览器之二 myRequest = new ActiveXObject(“Microsoft.XMLHTTP”); //Mozilla浏览器 myRequest = new XMLHttpRequest() ; </script>
认识Ajax 认识Ajax
2：XMLHtange
描述
状态改变的事件触发器
readyState
对象状态(integer) 0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成 服务器进程返回数据的文本版本 服务器进程返回数据的兼容DOM的XML文档对象 服务器返回的状态代码,如：404=‘文件未找到’、 200=‘成功’ 服务器返回的状态文本信息
Ajax能干什么
AJAX能干的事情很多，最基本的有以下几条：
• • • • • • 1：无刷新更新页面 2：按需获取数据，减轻服务器的负担 3：可以实现富客户端 4：基于标准化和广泛使用的技术 5：进一步实现页面和逻辑相分离 6：使用户获得连续的、动态的体验
认识Ajax 认识Ajax
AJAX有什么