Ajax 笔记

原文链接：Rocken小黑屋

1、一个完整的HTTP请求过程

• 建立TCP连接
• Web浏览器向Web服务器发送请求命令
• Web浏览器发送请求头信息
• Web服务器应答
• Web服务器发送应答头信息
• Web服务器向浏览器发送数据
• Web服务器关闭TCP连接

2、GET和POST

• GET（幂等，即GET无论执行次数多少，它的影响是相同的）：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
• POST：一般用于修改服务器上的资源，对所发送信息的数量无限制
• 对参数的数据类型，GET只接受ASCII

3、XMLHttpRequest发送请求

• open(method, url, async)
• setRequestHeader("Content-type","application/x-www-form-urlencoded");(设置HTTP头信息，告知web服务器请求一个表单)(POST)
• send(string);

4、XMLHttpRequest取得响应

• responseText：获得字符串形式的相应数据
• responseXML：获得XML形式的相应数据
• status 和statusText：以数字和文本形式返回HTTP状态码
• getAllResponseHesder()：获取所有的响应报头
• getResponseHeader()：查询响应中的某个字段的值
• readyState属性
  • 0：请求未初始化，open还没有调用
  • 1：服务器连接已建立，open已经调用
  • 2：请求已接收，已经接收到头信息
  • 3：请求处理中，已经接收到响应主体
  • 4：请求已完成，且相应已就绪，即响应完成

5、JSON简介

• JSON名称/值对组合中的名称和值对都写在双引号中，中间要用冒号隔开；而JavaScript的对象是不需要双引号的。
• JSON.eval()在解析字符串时，会执行该字符串中的代码（这样的后果是相当恶劣的），所以JSON.eval()已经被废除，我们要用JSON.parse()。

6、用jQuery实现Ajax

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

7、跨域

• 一个域名地址的组成
  • 协议://子域名.主域名 : 端口 / 请求资源地址
• 当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。
• 不同域之间相互请求资源，就算做”跨域“
• 127.0.0.1 和 localhost 的区别
• Javascript出于安全方面的考虑，不允许跨域调用其他页面的对象
• 处理跨域方法
  • 代理：通过在同域名的web服务器端创建一个代理，比如在北京的web服务器的后台来调用上海服务器的服务，然后再把响应结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果相同了。
  • JSONP JSONP可用于解决主流浏览器的跨域数据访问的问题。JSONP只支持GET请求。
  • XHR2
    • HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能。
    • IE10及以下的版本不支持
    • 只需在服务器端做一些小小的改造即可：
      • header('Access-Control-Allow-Origin:* ');
      • header('Access-Control-Allow-Methods:POST,GET');
• 同源策略 same-origin policy
  • 不同域的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

8、XMLHttpRequest方法

• abort()----取消当前请求
• getAllResponseHeader()----返回整套HTTP头字符串
• getResponseHeader(headerName)----返回指定HTTP头的值
• • open( method,URL );
  • open( method,URL,async );
  • open( method,URL,async,userName );
  • open( method,URL,async,userName,password );
  • 指定请求的方法，URL以及其他可选属性。
  • 方法参数可以是"GET","POST",或者"HEAD"中的一个值。也可以是其他HTTP方法，比如“PUT”和"DELETE"(主要用于REST应用程序中)。
  • " async "参数指定该请求是否应该异步处理。" true "意味着脚本处理发生在send()方法之后而不必等待响应，而" false "意味着继续脚本处理之前脚本要等待响应。
• send(content);----发送请求
• setRequestHeader( label,value )----给HTTP头加一个标签/值对进行发送。

9、服务器端AJax安全

• 基于Ajax的Web应用程序使用与常规Web应用程序相同的服务器端安全方案
• 你可以在你的web.xml文件（声明式）或者程序中（程序化）指定身份认证，授权信息以及要保护的数据。
• 基于Ajax的Web应用程序也受和常规Web应用程序一样安全威胁。

10、客户端Ajax安全

• Javascript代码对于用户/黑客是可见的。黑客可以使用JavaScript代码推断服务器端的弱点。
• JavaScript代码是从服务器下载的，然后在客户端执行（"eval"），可以通过恶意代码来危害客户端。
• 下载的JavaScript代码受沙箱安全模型约束，但是我们可以签名的JavaScript有所放宽。

11、如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头，然后在send()方法中规定您希望发送的数据：

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

12、异步 - True 或 False

XMLHttpRequest对象如果要用于AJAX的话，其open()方法的async参数必须设置为true。

xmlhttp.open("GET","ajax_test.html",true);

对于web开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。Ajax出现之前，这可能会引起应用程序挂起或停止。 通过AJAX。JavaScript无需等待服务器的响应，而是：

• 在等待服务器响应时执行其他脚本
• 当响应就绪后对响应进行处理

Async = true

当使用async=true时，请规定在响应处于onreadystatechange事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

Async=false

如需使用 async=false，请将 open() 方法中的第三个参数改为 false：

xmlhttp.open("GET","test1.txt",false);

不推荐使用 async=false，但是对于一些小型的请求，也是可以的。

请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

注意：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

13、服务器响应

responseText 属性

如果来自服务器的响应并非XML，请使用responseText属性。 responseText属性返回字符串形式的响应，因此您可以这样使用：

document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

responseXML属性

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

xmlDoc = xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementByTagName("ARTIST");
for(i = 0; i < x.length; i++){
    txt = txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML = txt;

扩展

你真的会使用XMLHttpRequest吗？

js中 onreadystatechange 和 onload的区别

ajax跨域，这应该是最全的解决方案了

掘金-Ajax

触碰jQuery：AJAX异步详解

交流

我是Rocken，我们一起进步，共勉

转载于:https://my.oschina.net/u/3648490/blog/3099962