Ajax基本知识

  1. XMLHttpRequest是AJAX的基础,现在浏览器都支持XMLHttpRequest对象(IE5,6使用ActiveXObject)
  2. 向服务器发请求
    - open(method,url,async) GET,POST/url/true异步,false同步
    - send(string) POST请求
  3. GET
    - 更简单更快
    POST
    - 无法使用缓存,更新服务器上的文件或数据库
    - 发送大量数据,POST没数据量限制
    - 包含未知字符更稳当可靠
  4. responseText/XML 获取不同形式的响应数据
  5. readyState 0:请求初始化 1:服务器已建立 2:请求已接收 3:请求处理 4:请求完成,响应就绪 status 返回状态
    ajax中的方法:

    $.ajax({
    type: "GET",
    url: "url.html",
    data: {"key":"value",.....},
    dataType: "json",
    success: function(data){},
    error : function(){}
    });

应用过程
1. 建立xmlHttpRequest对象

if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
if(xmlHttp.overrideMimeType) {
xmlHttp.overrideMimeType("text/xml");
}
} else if(window.ActiveXobject) {
var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for(var i = 0; i < activeName.length; i++) {
try {
xmlHttp = new ActiveXobject(activeName[i]);
break;
} catch(e) {}
}
}
if(!xmlHttp) {
alert("创建xmlhttprequest对象失败");
} else {}

2. 设置回调函数
“`
xmlHttp.onreadystatechange= callback;

   function callback(){}
```
3. 使用OPEN方法与服务器建立连接  xmlHttp.open("get","ajax?name="+ name,true)
```
   此步注意设置http的请求方式(post/get),如果是POST方式,注意设置请求头信息xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
```
4. 向服务器端发送数据
```
  xmlHttp.send(null);

  如果是POST方式就不为空
```
5.在回调函数中针对不同的响应状态进行处理
```
  if(xmlHttp.readyState == 4){       //判断交互是否成功

      if(xmlHttp.status == 200){         //获取服务器返回的数据         //获取纯文本数据

        var responseText =xmlHttp.responseText;

       document.getElementById("info").innerHTML = responseText;

      }

   }
```

猜你喜欢

转载自blog.csdn.net/u013270347/article/details/80341261