AJAX学习目标AsynchronousJavaScriptAndXML/JSON前台与后台异步交互得一门技术1:ajax运行原理2:ajax编程步骤3:ajax应用案例AJAX介绍AJAX:异步javascript与XMLAJAX:带来用户体验改变,就是web优化一种主要手段AJAX=DHTML(HTML、CSS、JavaScript)+XMLRequest对象AJAX产生得背景传统web交互模型,浏览器直接将请求发送给服务器,服务器回送响应,直接发给浏览器,Ajax交互模型,浏览器首先将请求发送Ajax引擎(以XMLRequest为核心),AJax引擎再将请求发送给服务器,服务器回送响应先发给Ajax引擎,再由引擎传给浏览器显示1、同步交互模式,客户端提交请求,等待,在响应回到客户端前,客户端无法进行其她操作2、异步交互模型,客户端将请求提交给Ajax引擎,客户端可以继续操作,由Ajax引擎来完成与服务武器端通信,当响应回来后,Ajax引擎会更新客户页面,在客户端提交请求后,用户可以继续操作,而无需等待。运行原理图:Ajax引擎对象异步发送请求给服务器同时接受服务器给予响应使用js局部跟新!!设计对象XMLRequest该对象:ajax引擎对象作用:及时发送异步请求给服务器及时获取服务器回应数据由js实现局部更新!!该对象客户端得浏览器来创建ajax引擎对象、、function(){varaa=newObject()}创建该对象浏览器兼容问题:不同浏览器创建ajax引擎方法就是不同得!!创建方式:Ajax编程快速入门步骤:(ajax开发步骤固定得)1、创建ajax引擎对象XMLRequest对象浏览器创建兼容问题(火狐chromesafari一样)IE不一样!来自w3cschool手册自己页面创建该对象封装js引入外部js脚本测试不同浏览器就是否获取该对象简化获取xhr对象得代码封装到js脚本中脚本内容:目标页面引入该脚本即可2、将状态触发器绑定到一个函数3、使用open方法建立与服务器得连接4、send()向服务器端发送数据5、在回调函数中对返回数据进行处理获取核心对象可以参考w3cSchool手册代码案例XMLRequest核心对象~方法:open()send()属性:onreadystatechange:状态回调函数responseText/responseXML:服务器得响应字符串status:服务器返回得状态码readyState:对象状态案例一get请求ajax异步发送get请求:应用场景演示get请求:点击按钮,将用户输入文本数据发送请求给服务器、、、服务器回送一个简单类型得数据给ajax引擎get、jsp输入参数之后点击按钮数据异步发送给服务器查瞧浏览器地址不会变化!ajax引擎接受服务器端回送数据使用jsdiv标签显示提示信息!!2:ajax发送请求点击事件发送ajax请求注意:xhr相关属性与方法作用open()建立连接与请求方式以及异步还就是同步三个参数一般开发就2个参数最后参数true默认不写!!send()发送请求:send(null)-->getsend(xxxx)-->post属性onreadystatechange属性事件与匿名函数绑定形成回调函数该函数服务器响应完成200通过js操作页面局部更新属性responseTextxhr获取服务器响应字符类型数据属性responseXMLxhr接受服务器端回送xml数据text/xmlresponse、setContextType("text/xml;charset=utf-8")属性readyState表示ajax请求发送状态012344表示请求发送完成响应就绪属性status服务器发送状态码200ok请求响应ok2:服务器端servlet开发接受请求响应数据ajax引擎通过xhr、responseText可以接受服务器响应数据了!!测试完成!!!案例二post请求ajax异步发送post请求:基于get模板几乎一致区分:open("post")send(xx传递给服务器数据写在这里key=value)send之前添加一个头信息xhr、setRequestHeader("Content-type","application/x-");其她代码不变!!客户端向服务器提交数据get/post1、get方式发送数据xml、open("GET","url?key=value");//参数已经在url上xml、send(null);2、post方式发送数据xml、open("POST"