这里是关于ajax的东西

[注]学习的黑马教程，具体实现代码在自己的github： 链接

传统网站中存在的问题

1. 网速慢的情况下，页面加载事件长，用户只能等待
2. 表单提交后，如果一项内容不合格，需要重新填写所有表单内容
3. 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间

Ajax的应用场景

1. 页面上拉加载更多数据
2. 列表数据无刷新分页
3. 表单项离开焦点数据验证
4. 搜索框提示文字下拉列表
   主要用在不刷新页面的情况下向服务器端发送请求和服务器端进行交互从而更改客户端页面中的数据和状态，主要目的提供浏览网站的用户体验

Ajax的运行环境

需要运行在网站环境中才能生效（使用node创建的服务器作为网站服务器）

Ajax运行原理

Ajax的实现步骤

1. 创建ajax对象 var xhr = new XMLHttpRequest();
2. 告诉Ajax请求地址以及请求方式 xhr.open('get','http://www.baidu.com')
3. 发送请求 xhr.send()
4. 获取服务器端给与客户端响应的数据 xhr.onload = function(){ console.log(xhr.responseText); }

服务器端响应数据的格式

服务器端大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到数据时，要将json数据和html字符串进行拼接，然后将拼接结果显示在页面
在http请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换成对象字符串进行传输
将json字符串转换成json对象：JSON.parse()

请求参数传递

传统网站的表单提交

ajax的请求参数传递

GET请求参数

POST请求参数

请求报文

请求参数的格式

告诉服务器当前请求参数的格式是json。JSON.stringfy()将json对象转换为json字符串
get请求不能提交json对象数据格式，传统网站的表单提交也不支持json

获取服务器端的响应

Ajax状态码

获取Ajax状态码：xhr.readyState

onreadystatechange事件

当Ajax状态码发生变化时将自动触发

两种方式的比较

Ajax错误处理

1. 网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果
   可以判断服务器端返回的状态码，分别进行处理[xhr.status]
2. 网络畅通，服务器没有接收到请求，返回404状态码
   检查请求地址是否错误
3. 网络畅通，服务器端能接收到请求，服务器端返回500状态码
   服务器端错误，找后端程序员进行沟通
4. 网络中断，请求无法发送到服务器端
   会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理

浏览器缓存问题

解决：在请求地址的后面加请求参数，保证每一次请求中的参数值不相同

同步异步请求

Ajax函数封装

模板引擎

使用模板引擎的模板语法，可以将数据和html拼接起来
** 使用步骤 **

1. 下载 art-template 模板引擎文件并在HTML页面中引入库文件。下载地址
   
2. 准备art-template模板
   
3. 告诉模板引擎哪一个模板和哪个数据进行拼接
   
4. 将拼接好的html字符串添加到页面中
   
5. 通过模板语法告诉模板引擎，数据和字符串如何拼接
   

FormData对象

作用

1. 模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式
2. 异步上传二进制文件

使用

实例方法

1. 获取表单对象中属性的值：formData.get('key')
2. 设置表单对象中属性的值：formData.set('key','value')
3. 删除表单对象中属性的值：formData.delete('key')
4. 向表单对象中追加属性值：formData.append('key','value')
   set方法与append方法的区别：在属性名已存在的情况下，set会覆盖已有键名的值，append会保留两个值

二进制文件上传

Ajax请求限制

A网站中的HTML文件只能向A网站服务器中发送Ajax请求；B网站中的HTML文件只能向B网站中发送Ajax请求

同源政策

如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同源，其中一个不同，就不是同源
** 同源政策目的 **
为了保证用户信息的安全，防止恶意网站窃取数据。最初的同源数据值A网站在客户端设置的Cookie，B网站不能访问

使用JSONP解决同源限制问题

jsonp不是ajax请求，但可以模拟ajax请求

1. 将不同源的服务器端请求地址写在script标签的src属性中
   
2. 服务器端响应数据必须是一个函数的调用，真正发送给客户端的数据需要作为函数调用的参数
   
3. 在客户端全局作用域下定义函数fn（定义在script标签前面，全局作用域）
   
4. 在fn函数内部对服务器端返回的数据进行处理
   

jsonp代码优化

1. 客户端需要将函数名称传递到服务器端
2. 将script请求的发送变成动态请求
3. 封装jsonp函数，方便请求发送

CORS跨域资源共享

允许浏览器向跨域服务器发送Ajax请求，克服了Ajax只能同源使用的限制

访问非同源数据，服务器端解决方案

同源政策是浏览器给予ajax技术的限制，服务器端是不存在同源政策的限制的

withCredentials属性

在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息
withCredentials:指定在涉及到跨域请求时，是否携带cookie信息，默认为false
Access-Control-Allow-Credentials：true,允许客户端发送请求时携带cookie

$.ajax()方法

发送jsonp请求：

serialize方法

将表单中的数据自动拼接成字符串类型的参数

$.get() 和 $.post() 方法

jquery中Ajax全局事件

NProgress

一套关于设计请求的规范

get: 获取数据
post：添加数据
put：更新数据
delete：删除数据