Ajax

Ajax

Asynchronous JavaScript and XML （异步的 JavaScript and XML ）

With Ajax, Web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. --- Wikipedia

使用Ajax技术，可以在不刷新网页的基础上，异步的更新或者改变页面的布局和界面；

History

90年代前期，所有的计算机网站，都是完整的HTML 页面。每个用户请求，都有一个新的页面从服务器进行加载。这种过程效率非常低（做了很多重复性内容）；

1996 年，微软的 Outlook Web App team 发展出了一个XMLHttpRequest脚本对象；后来，XMLHTTP ActiveX 被其它浏览器厂家所实现；

在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

Technologies

image

图中看的还是很清楚的，Ajax的原理，就是在浏览器与服务器之间，增加一层 Ajax；使用Ajax 与服务器进行交互(数据传输和返回)，从而不在重新刷新或者加载新的页面；

至于Ajax的底层原理，大家可以看

http://www.programering.com/a/MzN0kDMwATU.html

Ajax And Http

Ajax XmlHttpRequest

Request URL:http://localhost:8080/json/industry.json
Request Method:GET
Status Code:304 
Remote Address:[::1]:8080
Referrer Policy:no-referrer-when-downgrade
Date:Mon, 26 Mar 2018 12:28:41 GMT
ETag:W/"3030-1522061006311"
Accept:application/json, text/javascript, */*; q=0.01
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.9
Connection:keep-alive
Cookie:Webstorm-3c943155=51675e95-e9e4-4d73-9855-0a36de4b4f44; Idea-f45c67fc=194ac982-79ed-4b97-b102-89265926e027; JSESSIONID=65F26036D953F06807EEFF3DC832C585
Host:localhost:8080
If-Modified-Since:Mon, 26 Mar 2018 10:43:26 GMT
If-None-Match:W/"3030-1522061006311"
Referer:http://localhost:8080/index
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36

X-Requested-With:XMLHttpRequest

Http

Request URL:https://a1.cnblogs.com/units/image/C1/creative
Request Method:GET
Status Code:200 OK
Remote Address:118.178.109.187:443
Referrer Policy:no-referrer-when-downgrade
Access-Control-Allow-Origin:https://www.cnblogs.com
Connection:keep-alive
Content-Encoding:gzip
Content-Type:text/html
Date:Mon, 26 Mar 2018 12:30:13 GMT
Transfer-Encoding:chunked
Vary:Accept-Encoding
Vary:Origin
X-Powered-By:ASP.NET
Accept:text/html, */*; q=0.01
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.9
Connection:keep-alive
Host:a1.cnblogs.com
Origin:https://www.cnblogs.com
Referer:https://www.cnblogs.com/mrelk/p/7138423.html
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36

其实对比一下，发现两者只在请求头里，存在差异，即 Ajax

X-Requested-With:XMLHttpRequest

所以再判断时，可以通过方法：

String httpType=req.getHeader("X-Requested-With");

即可判断

异步：

Ajax技术是异步的请求，即不用等待 HttpResponse 的回复（不会被阻塞）

Ajax是告诉浏览器给我要发送一个HTTP请求，你给我新开个线程去执行下，完事后告诉我一声，我在其他function中执行后续操作（回调）。在线程返回结果前，我可以继续做其他事情。（异步） seg

这样看来，有点类似于Unix 网络IO 的味道

[图片上传失败...(image-1c82b4-1522069604474)]

使用方式

原生js

var xmlHttpRequest;
if(window.XMLHttpRequest){
    xmlHttpRequest=new XMLHttpRequest();
}else {
    xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}

open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。

. method：请求的类型；GET 或 POST
. url：文件在服务器上的位置
. async：true（异步）或 false（同步）

send(string)将请求发送到服务器。

. string：仅用于 POST 请求

Jquery

jQuery.ajax([settings])

 var options=
        {   
            // GET OR POST
            type : "GET",
            // ToUrl
            url : url,
            //  采用异步请求 true or false
            async : true,
            // request parameters
            data :{data2:data2},
            // request contentType
            contentType : "application/json;charset=utf-8",
             // request dataType
            dataType :  "json",
            
            // 返送之前 回掉
            beforeSend: function (data2) {
                beforeSendHandle(data2);
            },
            // error callback function
            error : function(data){
                errorHandle();
            },
             // success callback function
            success :  function(data){
                successHandle();
            }
        }
  $.ajax(options)

fetch和XMLHttpRequest

fetch 是区别于 XMLHttpRequest的另一个替代方案；