什么是AJAX？

1.背景介绍

浏览器与服务器之间，采用 HTTP 协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出 HTTP 请求。

1999年，微软公司发布 IE 浏览器5.0版，第一次引入新功能：允许 JavaScript 脚本向服务器发起 HTTP 请求。

这个功能当时并没有引起注意，直到2004年 Gmail 发布和2005年 Google Map 发布，才引起广泛重视。

2005年2月，AJAX 这个词第一次正式提出，它是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。

后来，AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。W3C 也在2006年发布了它的国际标准。

 

 

2.知识剖析

AJAX步骤

1.创建 XMLHttpRequest 实例

2.发出 HTTP 请求

3.接收服务器传回的数据

4.更新网页数据

 

1. 创建 XMLHttpRequest 实例

使用XMLHttpRequest (XHR)对象可以与服务器交互，从URL获取数据。虽然XHR字面意思是由XML\Http组成，但是它不是只能获取XML，它可以获取任何类型的数据，也支持Http以外的协议。

XHR本身是构造函数，可以使用new命令生成实例，它没有任何参数。

var request = new XMLHttpRequest();

 

     2.发出HTTP请求

创建好XHR对象后便可以使用open();发出Http请求，规定请求类型、URL以及是否异步处理请求。

request.open("POST","bbb/a/login",true);

method：请求的类型；GET 或 POST

url：文件在服务器上的位置

async：true（异步）或 false（同步）,不填写则默认为true

 

通常我们需要像 HTML 表单那样 POST 数据，就需要用setRequestHeader()设置HTTP头部。

request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

HTTP头部可以设置请求主体的类型（content-type），POST方法发送数据给服务器通常使用application/x-www-form-urlencoded类型来发送

 

使用send();方法（仅用于POST）将请求数据发送到服务器。

request.send("name=" + user.value + "&pwd=" + pwd.value);

 

       3.接收服务器传回的数据

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText  获得字符串形式的响应数据。

responseXML   获得 XML 形式的响应数据。

var response = JSON.parse(request.responseText);

一般服务器的数据用JSON存取，获取响应数据的时候我们需要将其解析读取

 

      4.更新网页数据

获取响应数据后，我们需要将网页更新，这时我们需要使用onreadystatechange来根据XHR的状态readyState的变化，执行一些基于响应的事件。

 

XHR三个重要的属性：

（1）onreadystatechange  存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

（2）readyState  

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

（3）status  

200: "OK"

404: 未找到页面

request.onreadystatechange=function(){//readyState改变时调用该函数

    if (request.readyState==4){//XHR请求完成响应就绪

        if (request.status==200){//OK 

            //校验数据            

          if (response.message == 'success') {//校验成功登录跳转

                location.href = "http://admin.com/#/login";

            }else {

                point.innerHTML = response.message;//校验失败显示错误

            }

        }

    }

};

 

 

3.常见问题

使用AJAX的时候我们经常需要解决跨域的问题，怎么利用nginx 反向代理解决跨域问题？

 

 

4.解决方案

未配置好nginx反向代理的时候，我们向服务器发送请求的时候，浏览器就会报出这样的错误信息。XMLHttpRequest cannot load ……

要实现跨域，主要注意修改添加nginx以下几项就可以了

location / {

            root   /web/js;  //html所在目录

            index  index.html index.htm;  //html

            try_files $uri $uri/ /index.html =404;

}

location /xxx-ajax/{  // /xxx-ajax/为后端提供的接口

        proxy_pass  http://xxx.com/;  //代理转发的url地址

}

 

5.编码实战

 

 

6.扩展思考

GET和POST的区别

在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是：GET 和 POST

GET - 从指定的资源请求数据。

POST - 向指定的资源提交要被处理的数据。

	GET	POST
后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户 数据会被重新提交）。
书签	可收藏为书签	不可收藏为书签
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded or multipart/ form-data。为二进制数据使用多重编码
历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
对数据长度的限制	是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。	无限制。
对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。 在发送密码或其他敏感信息时绝不要使用 GET ！	POST 比 GET 更安全，因为参数不 会被保存在浏览器历史或 web 服务器日志中。
可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。

 

 

7.参考文献

廖雪峰的官方网站

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000

MDN web docs

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/setRequestHeader

菜鸟教程

http://www.runoob.com/ajax/ajax-xmlhttprequest-send.html

阮一峰《JavaScript 标准参考教程（alpha）》

http://javascript.ruanyifeng.com/bom/ajax.html

 

 

8.更多讨论

1.content-type：application/x-www-form-urlencoded是什么

一个 POST 请求通常是通过 HTML 表单发送, 并返回服务器的修改结果. 在这种情况下, content type 是通过在 <form> 元素中设置正确的 enctype 属性, 或是在 <input> 和 <button> 元素中设置 formenctype 属性来选择的:

application/x-www-form-urlencoded: 数据被编码成以 '&' 分隔的键-值对, 同时以 '=' 分隔键和值

 

2.XMLHttpRequest在任何浏览器都可以使用？有兼容性的问题吗？

不是的，低版本的IE会出现兼容问题。我们可以通过检测window对象是否有XMLHttpRequest属性来确定浏览器是否支持标准的XMLHttpRequest。

标准写法：

var request = new XMLHttpRequest();

对于低版本的IE写法：

var request = new ActiveXObject('Microsoft.XMLHTTP');

把标准写法和IE写法混在一起，可以这么写：

var request;

if (window.XMLHttpRequest) {

    request = new XMLHttpRequest();

} else {

    request = new ActiveXObject('Microsoft.XMLHTTP');

}

 

3.为什么需要进行跨域

跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源，所以我们就需要通过一些方法来进行跨域请求资源，这里我们是通过使用ngnix反向代理来进行跨域