ajax学习笔记

发布时间：2020-12-15 21:43:39 所属栏目：百科来源：网络整理

导读：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连接。 (

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",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’);

课程学习地址

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!