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、AJAX工作原理

12、send()方法规范

如果需要像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");

13、异步 - 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;

14、服务器响应

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,我们一起进步,共勉

s

ajax

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!