成果链接：https://xjdxc.github.io/task/js-task5/login.html

任务耗时：2019.4.17-2019.4.19 三天

官网脑图：

自己脑图：

任务总结：

1.ajax的四个步骤

a.创建Ajax核心对象

variable=new XMLHttpRequest();    //不考虑ie6以下的做法

b.向服务器发送请求

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

可以选择GET或者POST

当发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠,比如密码.

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

c.服务器响应处理

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

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

分为同步和异步处理两种情况

异步操作要在请求状态改变事件中处理

readyState==4(响应内容解析完成，可以在客户端调用了)且status==200(请求正常处理完毕)

当符合这两个状态时,就会把异步事件放进js执行队列中,(相当于任务一setTimeout事件到了)

responseXML返回的是一份XML文档对象,可以使用W3C DOM节点树方法和属性对该XML文档对象进行检查和解析。responseText以字符串形式返回HTTP响应

d.根据返回的信息渲染页面

大体上就是这几个步骤

其中:

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪.

2.Nginx作为反向代理服务器完成跨域

当我们使用js或者js ajax方法访问一个域名时，作为开发者，我们把域名指向了Nginx服务器，而客户端是不知道的（这也是反向代理的特点）。当Nginx接收到拦截名时会自动向我们的目标服务器请求数据（拦截名后的接口保留），接收到数据后返还给客户端，完成前后端交互。

拦截名只是我们开发者与Nginx 的一个约定可以更改。

3.在使用jq的ajax方法时要注意JSON的类型数据。

JSON 是用于存储和传输数据的格式。包含两种数据结构：数组和对象。

JSON是目前比较普遍的前后端交互方法。当我们需要传送的数据不是字符串格式的时候需要转换为JSON格式。同样，收到后端传来的数据也要转换为JSON对象。