ajax简单总结（学写笔记）

Ajax的简单总结

Ajax简介

• Ajax，Asnchronous Javascript And XML（异步JavaScript和XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新新部分网页的技术。
• 通过在后台与服务器进行少量的数据交换，Ajax可以使网页实现异步更新。意味着可以在不更新整个网页的情况下，对网页的某部分进行更新。
• 不是新的编程语言，而是一种使用现有标准的新方法。
• 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
• 传统的网页在不使用Ajax的情况下，如果要更新内容，必须重新加载整个网页。

Ajax的使用

创建XML HttpRequerst对象

• 所有的现代浏览器均支持这个对象。
• 在IE5和IE6中使用ActiveXObject。

实例方法

 var xhr = new XMLHttpRequest();
    // 老版本的IE5 IE6 使用
 var xhr = new ActiveXObject();

我们可以封装一个兼容性函数

if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
   var xhr = new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
   var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

向服务器发送请求

使用创建的xhr对象的open方法来开启服务器发送请求交换数据，这只是开始，后面要使用send方法以后才算一次完整的请求。

open方法：（method，url，async）

• method，请求的类型：GET或POST（不区分大小写，建议大写）。
• url，要请求的地址。
• async：true异步，false异步。默认true。

GET和POST的区别
与post相比，get更简单也更快，大部分情况都能使用。
1.get请求的参数会跟在url后面，当传输一些敏感数据时不安全。post请求则会将参数作为HTTP消息的实体内容发送给WEB服务器。
2.get 虽然没有说url有长度限制，HTTP协议规范没有对url进行长度限制。但是一些浏览器会对url的长度进行限制。IE对url限制为2083字节（2K+35）1024个字符。对于其他浏览器，理论上没有长度限制，限制取决于操作系统的支持。特：这是对整个url的限制不单单指参数。post传输的数据量大，可以达到2M。
3.get方式的请求数据会被浏览器历史缓存下来，可以从浏览器的历史记录读取到这些数据。所以get会有严重的安全问题。
4.post请求必须设置请求头。
5.发送请求时，get 的参数都在url后面，所以send发送的参数为null，post请求在使用send方法时，需要传递参数。
6.无法使用缓存文件（更新服务器上的文件或数据库）使用post

xhr.open('GET','url?'); 

当使用post请求方法时，必须设置请求头参数。

xhr.setRequestHeader（"Content-type","application/x-www-form-urlencoded"）

请求头参数不止这一种，但是大部分情况使用这个。

send方法
经过上面步骤接下来就是send方法了。send向服务器发送想要发送的数据。一般是json格式。

  xhr.send("name=zhanghao&age=18" )

注意send里发送的数据的格式。后面会有一些封装好的Ajax请求工具。

接收到响应后的操作

xhr.redayState属性和xhr.status属性

redayState属性里面保存着Ajax请求的状态。从0到4 。
0：请求没有初始化。
1：服务器链接已经建立。
2：请求已经接受。
3：请求处理中。
4：请求已经完成，且响应已经就绪。

status属性保存着状态码判断网络请求状态。
200：表示ok。
404：表示未找到页面。
每一次的状态改变都会触发onreadystatechange事件。
所以当readyState状态等于4，且状态码为200时，表示响应已经就绪。

if (window.XMLHttpRequest) {
      var xhr = new XMLHttpRequest();
    } else {
      var xhr = new ActiveXObject();
    }
    // 老版本的IE5 IE6 使用
    // xhr.open('GET','url?');
    xhr.open('POST', 'http://localhost:3030/api/student', true);
    xhr.setRequestHeader("Content-type", "application/x-www-from-urlencoded");
    xhr.send("name=zhanghao&age=18");
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if (xhr.status > 200 && xhr.status <= 300 || xhr.status == 304) {
          // 进行操作。
        }
      }
    }