Ajax的概述与实现过程

一、ajax概述

1、Ajax是Asynchronous（[?"s??kr?n?s） JavaScript XML的简写，不是一门新技术，而是对现有技术的综合利用。这一技术能够向服务器请求额外数据而无需刷新页面，带来了更好的用户体验2、Ajax技术的核心是XMLHttpRequest对象（简称XHR），这是由微软首先引入的一个特性。在XHR出现之前，Ajax式的通信必须借助一些hack手段来实现，大多数是使用隐藏的框架或内嵌框架。3、XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步的方式从服务器取得更多的信息，意味着用户单击后，可以不必刷新页面也能获取新数据。也就是说可以使用XHR对象取得新数据，然后再通过DOM将新数据插入到页面中4、虽然Ajax名字中有XML的成分，但是呢，Ajax通信与数据格式无关，这种技术就是无须刷新页面即可从服务器取得数据，但不一定是XML数据

二、操作：原生ajax和jQuery中封装的ajax

1、原生ajax：

ajax作用：发送请求（设置请求setRequest）接收响应（getResponse）

A、ajax原生方式发送请求：

Ajax中最重要也是最固定的部分就是http请求。1）建立连接：（IE7及以上版本都支持XMLHttpRequest）1 var xhr = new XMLHttpRequest（）; //创建异步请求对象2） Get请求：格式必须是（url？name1=value1&name2=value2）1 xhr.open（"get","01-register.php？name="+name）;//初始化异步get请求2 xhr.send（null）; //与服务器建立连接3） Post请求1 xhr.open（"post","01-XMLHTTPRequest-test.php"）;//请求报文行2 xhr.setRequestHeader（"Content-Type","application/x-www-form-urlencoded"）; /*post请求设置请求头*/3 xhr.send（"name=rose&age=20"）; //请求报文体4） get和post请求的区别：★get不需要设置请求头，而post需要设置请求头★get的数据传递通过url进行，而post的数据在send方法中传递

B、ajax原生方式接收响应：

1 /*监听服务器的响应*/2 xhr.onreadystatechange=function（）{3 /*判断当前的响应是否成功1.服务器做出了响应2.响应的结果是正确的*/4 if（xhr.status==200 && xhr.readyState==4）{5 var result=xhr.responseText;6 console.log（result）; //输出从服务器中获取到的数据7 //接下来就可以对数据进行相应的处理了8 }9 };

C、处理响应数据：

1 /*监听*/ 2 xhr.onreadystatechange=function（）{ 3 if（xhr.status==200 && xhr.readyState==4）{/*判断状态*/ 4 var result; 5 /*获取响应报文中的Content-Type*/ 6 var ct=xhr.getResponseHeader（"Content-Type"）; 7 /*判断Content-Type,进行数据的解析*/ 8 if（ct.indexOf（"xml"）！= -1）{ 9 result=xhr.responseXML;10 }11 else if（ct.indexOf（"json"）！=-1）{12 result=JSON.parse（xhr.responseText）;13 }14 else{15 result=xhr.responseText;16 }17 /*调用回调函数--委托--代理*/18 success && success（result）;19 }20 };

2、jQuery中封装的ajax

1 $.ajax（{2 type: 请求方式（get/post）,3 url: "register.php",4 data:发送请求数据,5 beforeSend:function（）{返回false可以取消本次ajax请求},6 success:function（result）{ 成功响应后调用 },7 error:function（err）{ 错误响应时调用 },8 complete:function（）{响应完成时调用（包括成功和失败） }9 }）;jQuery中提供了专门的方法来序列化表单：1 $（"form"）.serialize（）: //序列化表单（即格式化key=val & key=val）;

三、响应

我们需要监听服务器的响应状态，然后对从服务器中获取的数据做相应的处理。1） onreadystatechange是JavaScript事件中的一种，用于监听XMLHttpRequest的状态2） readystate：响应状态，返回XMLHTTP请求的当前状态

readyState 状态	状态说明
（0）未初始化	此阶段确认XMLHttpRequest对象是否创建，并为调用open（）方法进行未初始化作好准备。值为0表示对象已经存在，否则浏览器会报错－－对象不存在。
（1）载入	此阶段对XMLHttpRequest对象进行初始化，即调用open（）方法，根据参数（method,url,true）完成对象状态的设置。并调用send（）方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
（2）载入完成	此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
（3）交互	此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。
（4）完成	此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。

3） status：服务器的响应码常见响应码：200—服务器成功返回网页 404—请求网页不存在 503—服务不可用关于服务器响应码，详情请看————网络传输协议本文永久更新链接地址：http://www.linuxidc.com/Linux/2016-11/136873.htm