黑马程序员AJA入门系列

1、黑马程序员：AJAX入门系列什么是AJAX ?AJAX 是” Asynchronous JavaScript and XML ” 的缩写（异步的 JavaScript和XML），即一种实现无页面刷新获取服务器数据的混合技术。XML是什么？XML是” Extensible Markup Language”是一种描述数据的标记语言。早期人们通常使用XML传输数据，现在流行的数据格式为类似字符串对象的：JSON无页面刷新是什么？传统的web应用允许用户填写表单，当提交表单时就向web服务器发送一 个请求。服务器接收并处理传来的表单， 然后返回一个新的网页。这个做法浪费 了很多网络资源，因为在前后两个

2、页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就根据服务器的响应时间增长而增长，导致用户界面的相应比本地应用慢得多，也造成用户体验 非常差。而AJAX应用可以仅向服务器取回需要变化的部分数据，它使用SOAP或其他一些基于 Webservice接口并在客户端采用JavaScript出来来自服务器的相 应。由于在服务器和浏览器之前交换的数据大量减少，我们就能看到响应更快的 应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以服务器的 处理时间也相应的减少了使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使 得Web应用程

3、序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改 变过的信息。Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。 就像DHTML应用程序那样，Ajax应用程序必须在众多不同的浏览器和平台上 经过严格的测试。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问 世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。1、先来一个ajax前后端交互图AJAX怎么使用？首先第一个介绍 XMLHttpRequest 对象，XMLHttpRequest 是 AJAX 的基 础，所有现代浏览器均支持XMLHttpRequ

4、est 对象(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 头。abort() ：取消异步请求；

5、属性：.responseText ：获得字符串形式的响应数据。.responseXML ：获得 XML 形式的响应数据。.status ：响应的 HTTP 状态； 200: "OK" 404: 未找到页面.statusText ：HTTP 状态的说明；.readyState ：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪准备 AJAX2、浏览器 AJAX 请求服务器图(1) get/post 请求Get 请求案例：Xmlhttp.open( “g

6、et ”,” *.php ”true,)Xmlhttp.send();注： get 方式需要对中文处理(数据拼接在 url 后面 a=1&b=2 )Post 请求案例Xmlhttp.open( “ post ” ,”*.php ” true,)Xmlhttp.send();send 中注 :post 方式需要在传参之前设置头部，数据写在(2) 请求地址，存储数据的接口地址(3) 同步请求与异步请求如果同步： Xmlhttp.open( “get ” ,”*.php ” ,false)如果异步： Xmlhttp.open( “get ”,” *.php,true) 同步和异步区别： 同步

7、 JavaScript 会等到服务器响应就绪才继续执行。 如果服务器繁忙或 缓慢，应用程序会挂起或停止。异步在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理 2.设置请求头setRequestHeader(header,value)header: 规定头的名称， value: 规定头的值 例： xhr.setRequestHeader("myHeader", "MyValue")3. 发送请求GETxhr = new XMLHttpRequest() xhr.open("get","*.php",fals

8、e) xhr.setRequestHeader("Content-type","appurlencoded") xhr.send(null)POST xmlhttp.open("post","/try/ajax/demo_post2.php",true);xmlhttp.setRequestHeader("Content-type","app"); xmlhttp.send("fname=Henry&lname=Ford");1、前端发请求(GET、POST)后台返回json字符串流程图 4.onreadystatechange 事件监听 xhr 属性的变化xhr = new XMLHttpRequest() xhr.onreadystatechange = () => if (xhr.readystate = 4) if (xhr.status >= 200 && xhr.status < 300) | xhr.status = 304) alert(xhr.responseText) else alert("Request was unsu