AJAX学习总结 Asynchronous JavaScript And XML

1、传统的请求都有哪些，缺点是什么？

• 直接在浏览器地址上输入URL
• 点击超链接
• 提交form表单
• JS代码发送请求：
  • window.open()
  • document.location.herf = url
  • window.location.herf =url

存在的问题：页面全部刷新，导致用户体验差，传统的请求导致用户的体验有空白期（体验不连贯）等；

2、XML简介

XML 可扩展标记语言，被设计用来传输和存储数据。

XML和HTML类似，不同的是HTML中都是预定义的标签，而XML中没有预定义标签，全部都是自定义标签来标识一些数据。

如保存一个学生数据
    <student>
        <name>zhangsan</name>
        <age>18</age>
    </student>

目前ajax已经不使用xml来传输数据了，而是用json代替。

{name:"zhangsan","age":"18"}

3、AJAX（ Asynchronous JavaScript And XML）

异步的js和xml，通过ajax可以在浏览器向服务器发送异步请求，最大的优势就是 无刷新的获取数据。ajax不是新的语言，而是一种将现有标准组合在一起使用的新方式。

优点： 无需刷新页面而与服务器端进行通信，允许根据用户事件来更新部分页面的内容。

缺点：没有浏览历史不能回退，存在跨域问题，SEO不友好。

4、HTTP协议 hypertext transport protocol

超文本传输协议，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

5、同源策略

浏览器的一种安全策略，协议，域名，端口号 必须完全相同；ajax默认遵循同源策略。

违背同源策略就是跨域。

6、ajax的使用

js中有内置的构造函数来调用ajax对象，创建出ajax对象以后，就是用ajax对象的方法去发送请求和接收响应。

ajax的最大特点就是无需刷新界面就可以像服务器传输或者读写数据(无刷新更新页面)，这一特点主要是得益于XMLHTTP组件中的XMLHTTPRequest对象。

 6.1、创建ajax对象

如下方法可以创建ajax对象，有了这个对象，就可以用来发送ajax请求了。

const xhr = new XMLHttpRequest(); // IE9及以上

const xhr = new ActiveXObject('Mricosoft.XMLHTTP'); // IE9以下

6.2、配置连接信息

XMLHttpRequest 对象属性描述(用于和服务器交换数据。)

 

//所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
const xhr = new XMLHttpRequest()；
// xhr.open('请求⽅式', '请求地址', 是否异步)
xhr.open('get', 'http://127.0.0.1:8000/server')；

// xhr 对象中的 open ⽅法是来配置请求信息的
// 第⼀个参数是本次请求的请求⽅式 get / post / put / ...
// 第⼆个参数是本次请求的 url 
// 第三个参数是本次请求是否异步，默认 true 表示异步，false 表示同步

6.3、发送请求

//如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
const xhr = new XMLHttpRequest()
xhr.open('get', 'http://127.0.0.1:8000/server')

// 使⽤ xhr 对象中的 send ⽅法来发送请求
xhr.send()

使用send()方法将配置好信息的ajax对象发送到服务端

最基本的ajax请求就是上述三步，可以将请求发送到服务端，如果服务端正常的话，响应也可以回到客户端。因此，后续就需要拿到返回客户端的响应。

拿到响应有两个前提条件：

1、本次HTTP请求时成功的，状态码200；(其实200~299都是成功的)

2、ajax对象自身的状态码为4；

6.4、ajax状态码

xhr.readyState可以获取ajax请求过程中的某个状态，只有当readyState值为4的时候，才可以正常使用服务端发来的数据。

 readyState === 0 : 表示未初始化完成，也就是 open 方法还没有执行 
 readyState === 1 : 表示配置信息已经完成，也就是执行完 open 之后 
 readyState === 2 : 表示 send 方法已经执行完成
 readyState === 3 : 表示正在解析响应内容
 readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了

6.5 readyStateChange事件

ajax中的readyStateChange事件是专门用来监听 readystate的值的变化的；只要readystate的值改变，就会触发readyStateChange事件，因此我们需要在这个事件中监听readystate是不是为4；

   const xhr = new XMLHttpRequest() 
    xhr.open('get', 'http://127.0.0.1:8000/server')
	xhr.send()
	xhr.onreadyStateChange = function () {
	// 每次 readyState 改变的时候都会触发该事件
	// 我们就在这里判断 readyState 的值是不是到 4
	// 并且 http 的状态码是不是 200 ~ 299
	if (xhr.readyState === 4 && xhr.status >=200 && xhr.status <300) {
	// 这里表示验证通过
	// 我们就可以获取服务端给我们响应的内容了 }
}

6.6、使用ajax发送请求时携带参数

参数就是和后台交互时，给后台的一些信息，get和post两种方式都可以携带参数，但是有一定的区别。

GET更简单更快，大部分情况下都可以使用

POST请求用在以下的情况：

1、无法使用缓存文件

2、向服务器发送大量的数据（post没有数量的限制）

3、发送包含位置字符的用户输入 （post比get更加稳定可靠）

发送带有参数的get请求，直接在URL后面进行拼接就可以

xhr.open('get', 'http://127.0.0.1:8000/server?a=100&b=200')
// 直接在地址后面加一个问号?然后在后面key=value的形式传递，两个数据之间用&分割

发送带有参数的post请求，post的请求参数在请求体中，因此不需要在URL后面拼接

    xhr.open('get', 'http://127.0.0.1:8000/server');
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
	xhr.send('a=100&b=200');

    // 如果是用 ajax 对象发送 post 请求，必须要先设置一下请求头中的 content- type
	// 告诉一下服务端我给你的是一个什么样子的数据格式
    // xhr.setRequestHeader('content-type', 'application/x-www-form- urlencoded')