ajax学习笔记

1.创建XMLHttpRequest对象

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

2.HTTP请求过程

• (1)建立TCP连接。
• (2)Web浏览器向Web服务器发送请求命令。
• (3)Web浏览器发送请求头信息。
• (4)Web服务器应答。
• (5)Web服务器发送应答头信息。
• (6)Web服务器向浏览器发送数据。
• (7)Web服务器关闭TCP连接。

3.HTTP请求一般组成

• (1)HTTP请求的方法或动作，比如是GET还是POST请求。
• (2)正在请求的URL。
• (3)请求头，包含一些可客户端环境信息，省份验证信息等。
• (4)请求题，也就是请求正文，请求正文可以包含客户提交的查询字符串信息，表单信息等等。

4.HTTP响应一般组成

• (1)由数字和文字组成的状态码，用来显示请求是成功还是失败。
• (2)响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型，日期时间，内容类型和长度。
• (3)响应体，也就是响应正文。

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

• (1)1XX:信息类，表示收到Web浏览器请求，正在进一步的处理中
• (2)2XX:成功，表示用户请求被正确接收，理解和处理例如：200 OK
• (3)3XX:重定向，表示请求没有成功，客户必须采取进一步的动作
• (4)4XX:客户端错误，表示客户端提交的请求有错误，例如：400 NOT Found,意味着请求中所引用的文档不存在。
• (6)5XX:服务器错误，表示服务器不能完成对请求的处理，如500

6.XMLHttpRequest发送请求：

• open (method，URL，async)method:请求方法 URL:地址 async:true异步/false同步,默认为true
• send (string)把请求发送到服务器,get方法可以不设置参数
  例如：

request.open("GET", "get.php", true);
request.send(); 
request.open("POST","careat.php", true);
//设置请求头，告诉服务器发送一个表单, 窗体数据被编码为名称/值对
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("name=superpig&sex=男");

7.XMLHttpRequest取得响应：

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

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

监听readyState属性：
var request = new XMLHttpRequest();
request.open("GET", "get.php", true);
request.send();
request.onreadystatechange = function() {
    if (request.readyState === 4 && request.status === 200){
         //处理事情 request.responseText
     }
}

8.用jQuery实现Ajax

• type: 类型，”POST”或”GET”,默认为”GET”
• url: 发送请求的地址
• data: 是一个对象，连同请求发送到服务器的数据
• dataType: 预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断， 一般我们采用json格式，可以设置为”json”
• success：是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串
• error：是一个方法，请求失败时调用此函数，传入XMLHttpRequest对象

9.跨域

• (1)一个域名地址的组成：协议，子域名，主域名，端口号，请求资源地址
• (2)当协议，子域名，主域名，端口号中任意一个不同时，都算作不同域
• (3)不同域之间相互请求资源，就算作“跨域”，例如：
  

www.abc.com/index.html调用www.abc.com/service.php(非跨域)
www.abc.com/index.html调用www.efg.com/service.php(跨域)
www.abc.com/index.html调用bbs.abc.com/service.php(跨域)
www.abc.com/index.html调用www.abc.com:81/service.php(跨域)
www.abc.com/index.html调用 https://www.abc.com/service.php(跨域)

10.跨域解决办法

• (1)代理：通过再同域名的web服务器端创建一个代理。例如：
  

  
  北京服务器(域名： www.beijing.com)
  上海服务器(域名： www.shanghai.com)
  在北京的web服务器的后台(www.beijing.com/proxy-shanghaiservice.php)来调用上海服务器
  (www.shanghai.com/service.php)的服务。然后再把响应结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果相同了。

(2)JSONP解决get请求跨域问题

(3)XHR2:HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些功能，IE10以下不支持，只要在服务端添加如下代码即可：
header(‘Access-Control-Allow-Origin:*’);
header(‘Access-Control-Allow-Methods:POST,GET’);

课程学习地址