黑马程序员AJAX入门系列.docx

黑马程序员：AJAX入门系列 什么是AJAX ? AJAX 是” Asynchronous JavaScript and XML ” 的缩写（异步的 JavaScript 和 XML）, 即一种实现无页面刷新获取服务器数据的混合技术。 XML是什么？ XML是” Extensible Markup Language ”是一种描述数据的标记语言。 早期人们通常使用XML传输数据，现在流行的数据格式为类似字符串对象的： JSON 无页面刷新是什么？ 传统的web应用允许用户填写表单，当提交表单时就向 web服务器发送一个请求。服 务器接收并处理传来的表单，然后返回一个新的网页。这个做法浪费了很多网络资源，因为 在前后两个页面中的大部分 HTML代码往往是相同的。由于每次应用的交互都需要向服务 器发送请求，应用的响应时间就根据服务器的响应时间增长而增长， 导致用户界面的相应比 本地应用慢得多，也造成用户体验非常差。 而AJAX应用可以仅向服务器取回需要变化的部分数据， 它使用SOAP或其他一些基于 Webservice接口并在客户端采用JavaScript出来来自服务器的相应。由于在服务器和浏览 器之前交换的数据大量减少，我们就能看到响应更快的应用。同时很多的处理工作可以在发 出请求的客户端机器上完成，所以服务器的处理时间也相应的减少了。 使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。 这使得Web应用 程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。 Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。就像DHTML 应用程序那样，Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。 随着Ajax .readyState .readyState :存有 XMLHttpRequest 的状态。 的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设 计的技术，为那些不支持JavaScript的用户提供替代功能。 1、先来一个ajax前后端交互图 AJAX怎么使用？ 首先第一个介绍 XMLHttpRequest 对象，XMLHttpRequest 是AJAX的基础，所有现 代浏览器均支持 XMLHttpRequest 对象(IE5、IE6使用ActiveXObject )，他用于在后台 与服务器交换数据，这意味着可以在不重新加载整个页面的情况下， 对页面的某个部分数据 进行更新。 创建XMLHttpRequest 的语法： Variable = new XMLHttpRequest。； 方法： open(method,url,async) : 1、method :请求的类型；GET 或 POST 2、url :文件 在服务器上的位置 3、async : true (异步)或false (同步) setRequestHeader(header,value) :向请求添加 HTTP 头。 sen d(stri ng) 将请求发送到服务器。 abort():取消异步请求； 属性： .responseText :获得字符串形式的响应数据。 .responseXML :获得 XML形式的响应数据。 .status :响应的HTTP状态；200: OK 404:未找到页面 .statusText : HTTP 状态的说明； 从 从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 准备 AJAX 2 、浏览器 AJAX 请求服务器图 get/post 请求 Get 请求案例： Xmlhttp.open( “ get ”,”**.php ” true,) Xmlhttp.send(); 注： get 方式需要对中文处理(数据拼接在 url 后面 a=1b=2 ) Post 请求案例 Xmlhttp.open( “ post ” ,”**.php ” true,) Xmlhttp.send(); 注 :post 方式需要在传参之前设置头部，数据写在 send 中 请求地址，存储数据的接口地址 同步请求与异步请求 如果同步： Xmlhttp.open( “get ” ,”**.php ” ,false) 如果异步： Xmlhttp.open( “ get ”,” **.php,true) 应用同步和异步区别： 应用 同步 JavaScript 会等到服务器响应就绪才继续执行。 如果服务器繁忙或缓慢， 程序会挂起或停止 xhr.send(null)xhr.status xhr.send(null) xhr.status 300) || 异步在等待服务器响应时