Ajax之初步

来源:互联网 发布:goodbye my lover 知乎 编辑:程序博客网 时间:2024/05/20 06:53

学习网址:http://www.imooc.com/learn/250
一、创建XHR对象

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

二、创建HTTP请求
http是计算机通过网络进行通信的规则。
http是一种无状态协议:不建立持久的连接,服务端不保留连接的信息

http请求过程:
1,建立TCP连接
2,浏览器向服务器发送请求命令
3,浏览器向服务器发送请求头信息
4,服务器应答
5,服务器发送应答头信息
6,服务器发送数据
7,服务器关闭TCP连接

请求响应的状态码
1xx:信息类,表示收到web浏览器请求,正在进一步的处理中
2xx:成功,表示用户请求被正确接收,理解和处理。如200 OK
3xx:重定向,表示请求没有成功,客户必须采取进一步的操作
4xx:客户端错误,表示客户端提交的请求有错误,例如,404 not found,意味着请求中所引用的文档不存在
5xx:服务器错误,表示服务器不能完成对请求的处理,如500

① 发送一个GET请求

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

② 发送一个POST请求

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

③ 发送一个带请求体的POST请求

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

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

readyState属性的意思:
0:请求未初始化,open还没有调用
1:服务器连接已经建立,open已经调用
2:请求已经被接收,接收到请求头信息
3:请求处理中,接收到请求体信息
4:请求已完成,并且响应已经就绪完成

request.onreadystatechange = function() {      if (request.readyState === 4 && request.status === 200) {          //处理request.responseText      }  } 

四、完整案例

var request;  if(window.XMLHttpRequest) {      // IE7+,FireFox,Chrome,Opera,Safari...      request = new XMLHttpRequest();  } else {      // IE6,IE5      request = new ActiveXObject("Microsoft.XMLHTTP");   }  request.open("POST", "create.php", true);  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  request.send("name=Ryn&hobby=女");  request.onreadystatechange = function() {      if (request.readyState === 4 && request.status === 200) {          //处理request.responseText      }  }   
0 0
原创粉丝点击