Ajax---概念介绍

Posted 2020-08-22 zhangzhongjiang

Ajax不是某种编程语言，是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。

运用html和CSS来实现页面，表达信息；

运用XMLHttpRequest和Web服务器进行数据的异步交换；

运用javascript操作DOM，实现动态局部刷新；

I. Ajax同步与异步

 

II. 创建XMLHttpRequest对象

var request;
if(window.XMLHttpRequest){
  request=new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari...
}else{
  request=new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5...
}

 

III. Ajax-HTTP请求

（1）什么是HTTP?

  http是计算机通过网络进行通信的规则；

  http是一种无状态协议：不建立持久的连接；

（2）HTTP请求

（2.1）一个完整的HTTP请求过程，通常有下面7个步骤：

　　（01）建立TCP连接；

　　（02）Web浏览器向Web服务器发送请求命令；

　　（03）Web浏览器发送请求头信息；

　　（04） Web浏览器应答；

　　（05）Web服务器发送应答头信息；

　　（06）Web服务器向浏览器发送数据；

　　（07） Web服务器关闭TCP连接。

 （2.2） 一个HTTP请求一般由四部分组成：

　　（01） http请求的方法或动作，比如是GET还是POST请求；

　　（02）正在请求的URL，总得知道请求的地址是什么；

　　（03）请求头，包含一些客户端环境信息，身份验证信息等；

　　（04）请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等。

（2.3）HTTP请求---概念介绍

GET/login.php HTTP/1.1
Host:localhost
Connection:keep-alive
Accept:text/javascript,application/javascript,application/ecmascript,application/x-ecmascript,*/*;
q=0.01
X-Requested-Width:XMLHttpRequest
User-Agent:Mozilla/5.0(Windows NT 6.1)Referer:http://www.baidu.com/
Accept-Encoding:gzip,deflate,sdch
Accept-Language:zh-CN,zh;q=0.8,en;q=0.6

username=admin&password=123456

GET（默认的）：一般用于信息获取；

　　　使用URL传递参数；

         对所发送信息的数量也有限制，一般在2000个字符

POST：一般用于修改服务器上的资源；

　　     对所发送信息的数量无限制。

（2.4）HTTP响应

　　一个HTTP响应一般由三部分组成：

　　（01）一个数字和文字组成的状态码，用来显示请求是成功还是失败；

　　（02）响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等；

　　（03）响应体，也就是响应正文。

HTTP/1.1 200 OK
Date:Sun,23 Nov 2014 10:14:45 GMT
Server:Apache
Content-Encoding:gzip
Content-Length:7112
Connection:Keep-Alive
Content-Type:application/javascript

　　(2.4.1) HTTP状态码

　　HTTP状态码由3位数字构成，其中首位数字定义了状态码的类型：

　　1XX：信息类，表示收到了Web浏览器请求，正在进一步的处理中

　　2XX：成功，表示用户请求被正确接收，理解和处理。例如： 200  OK

　　3XX：重定向，表示请求没有成功，客户必须采取进一步的动作

　　4XX：客户端错误，表示客户端提交的请求有错误，例如：404 NOT Found，意味着请求中所引用的文档不存在。

　　5XX：服务器错误，表示服务器不能完成对请求的处理，例如：500

IV. XMLHttpRequest发送请求

• open(method,url,async)　　
  method:发送请求方法；url：请求地址；async：请求同步/异步，异步（true）和同步（false），默认值是true（异步）。
• send(string)

request.open("GET","get.php",true)
request.send();

request.open("POST","post.php",true);
request.send();

request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=jack&sex=male");

V. XMLHttpRequest取得响应

• responseText：获取字符串形式的响应数据；
• responseXML：获取XML形式的响应数据；
• status和statusText：以数字和文本形式返回HTTP状态码；
• getAllResponseHeader()：获取所有的响应报头；
• getResponseHeader()：查询响应中的某个字段的值；

• readyState属性
  0：请求未初始化，open还没有调用；
  1：服务器连接已建立，open已经调用；
  2：请求已接收，也就是接收到头信息了；
  3：请求处理中，也就是接收到响应主体了；
  4：请求已经完成，且响应已经就绪，也就是响应完成了。

var request=new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange=function(){ 　　//监听服务器是否做出正确响应
  if(request.readyState===4 && request.status===200){
    //做一些事情 request.responseText
  }
}