Ajax的学习

一、原生AJAX

1.1、AJAX简介

AJAX 全称 Asynchronous Javascript And XML,就是异步的JS和XML

//通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据.

AJAX不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式

1.2、XML简介

XML 可扩展标记语言

XML 被设计用来传输和存储数据.

XML和HTML类似,不同的是HTML中都是预定义标签,而XML中没有预定义标签,全都是自定义标签,用来表示一些数据

比如有一个学生数据:

name = '陈冠希'; age=20 ; gender='男'

用XML表示

<student>
 <name>陈冠希</name>
 <age>20</age>
 <gender>男</gender>
</student>

现在XML基本已经被JSON取代了。用json表示：

{
 "name":"陈冠希",
 "age":20,
 "gender":"男"
}

• 关于JSON数据

//json是前后端实现通讯的一种数据格式。
//该数据是由[]{},:""组成的。属性的名字必须要用双引号包裹。

1.3、AJAX的特点

//AJAX的优点
1.可以为无需刷新页面而与服务器进行通信
2.允许你根据用户事件来更新部分页面内容

//AJAX的缺点
1.没有浏览历史,不能回退
2.存在跨域问题
3.SEO不友好

1.4、AJAX的使用基本步骤

**注意：**XMLHttpRequest，AJAX的所有操作都是通过该对象进行的

• (1)、创建XMLHttpRequest对象

const xhr =new XMLHttpRequest();

• (2)、设置请求信息

语法格式：xhr.open(method,url)
初始化，设置请求方法和URL
xhr.open('GET','http://127.0.0.1:8000/server')

• (3)、可以设置请求头，根据API需要选择是否要设置

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

• (4)、发送请求

xhr.send(body); //get请求不传body参数，只有post请求使用

• (5)、事情绑定，接收响应，处理服务端返回的结果

xhr.onreadystatechange=function(){
    //判断（服务端返回了所有的结果）
	if(xhr.readState===4){
		//判断响应状态码 200 404 403 401 500
        // 2xx 表示成功
        if(xhr.status >=200 && xhr.status <300){
            //处理结果 行、头、空行、体
            //响应行
            console.log(xhr.status);//状态码
            console.log(xhr.statusText);//状态字符串
            console.log(xhr.getAllResponseHeaders());//所有响应头
            console.log(xhr.response);//响应体
        }
    }
}
//解释一下：onreadystatechange
on:  when  当....时候
readystate：是xhr对象中的属性，表示状态，其值为：0、1、2、3、4
						  0:表示未初始化,最开始就是这个值
                          	1:表示open 方法调用完毕
                            2：表示send 方法调用完毕
                            3：表示服务端返回部分结果
                            4：表示服务端返回全部结果
//关于readyState下面有详细解释
change：改变，当改变的时候触发一次 

1.5、解决IE缓存问题

问题：在一些游览器中(IE)，由于缓存机制的存在，ajax只会发送的第一次请求，剩下多次请求不会再发送给浏览器而是直接加载缓存中的数据。

简而言之：就是服务器刷新，新的发送内容得不到更新，会依赖缓存里的内容

xhr.open("get","/testAJAX?t="+Date.now());

1.6、AJAX请求状态

xhr.readyState 可以用来查看请求当前的状态

0: 表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。

1: 表示send()方法还没有被调用，仍然可v以使用setRequestHeader()，设定HTTP请求的头信息。

2: 表示send()方法已经执行，并且头信息和状态码已经收到。

3: 表示正在接收服务器传来的body部分的数据。

4: 表示服务器数据已经完全接收，或者本次接收已经失败了

• 示例

var xhr = new XMLHttpRequest();
console.log('UNSENT', xhr.readyState); // readyState 为 0

xhr.open('GET', '/api', true);
console.log('OPENED', xhr.readyState); // readyState 为 1

xhr.onprogress = function () {
    console.log('LOADING', xhr.readyState); // readyState 为 3
};

xhr.onload = function () {
    console.log('DONE', xhr.readyState); // readyState 为 4
};

xhr.send(null);
//注意这段代码缺了服务端代码，只能显示0和1

5、AJAX的API

5.1、XMLHttpRequest的属性

5.1.1、status

//只读属性，返回了XMLHttpRequest响应中的数字状态码， status的值是一个无符号的短整型。在请求完成前，status的值为0.
注意：如果XMLHttpRequest出错，浏览器返回的status也为0		

• 示例

//1、实例化对象
var xhr = new XMLHttpRequest();
console.log('UNSENT', xhr.status);
//2、设置请求方式和地址
//备注：open第三个参数，一个可选的布尔参数，表示是否异步执行操作，默认为true。如果值为false，send()方法直到收到答复前不会返回。如果true，已完成事务的通知可供事件监听器使用。如果multipart属性为true则这个必须为true，否则将引发异常。
xhr.open('GET', '/server', true);
console.log('OPENED', xhr.status);

//3、progress事件会在请求接收到数据的时候被周期性触发
xhr.onprogress = function () {
  console.log('LOADING', xhr.status);
};

//4、当一个XMLHttpRequest请求完成的时候会触发load 事件。
xhr.onload = function () {
  console.log('DONE', xhr.status);
};
//5、XMLHttpRequest.send() 方法用于发送 HTTP 请求。如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。XMLHttpRequest.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。
xhr.send(null);

/**
 * 输出如下：
 *
 * UNSENT（未发送） 0
 * OPENED（已打开） 0
 * LOADING（载入中） 200
 * DONE（完成） 200
 */

5.1.2、statusText

//响应状态文本
和status 对应，详细的参照请跳转下面连接

https://blog.csdn.net/qq_37682202/article/details/118756034?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163002964616780271514197%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=163002964616780271514197&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_ecpm_v1~rank_v29_ecpm-4-118756034.first_rank_v2_pc_rank_v29&utm_term=XMLHttpRequest.statusText&spm=1018.2226.3001.4187

5.1.3、onreadystatechange

//绑定readyState改变的监听，只要 readyState 属性发生变化，就会调用相应的该属性，具体请参上基本步骤

5.1.4、responseType

//用于指定响应中包含的数据类型。它还允许作者更改响应类型。如果将 responseType 的值设置为空字符串，则会使用 text 作为默认值。
语法：XMLHttpRequest.responseType = type;

其type值可以设置为：arraybuffer，blob，document，json，text，ms-stream
//arraybuffer:
response 是一个包含二进制数据的 JavaScript ArrayBuffer。
//blob
response 是一个包含二进制数据的 Blob 对象。
//document
response 是一个 HTML Document 或 XML XMLDocument，根据接收到的数据的 MIME 类型而定。
//json
response 是通过将接收到的数据内容解析为 JSON 而创建的 JavaScript 对象。
//text
response 是 DOMString 对象中的文本。
//ms-stream
response 是流式下载的一部分；此响应类型仅允许用于下载请求，并且仅受 Internet Explorer 支持。

注意：将 responseType 设置为特定值时，作者应确保服务器实际发送的响应与该格式兼容。如果服务器返回的数据与设置的 responseType 不兼容，则 response 的值将为null .

5.1.5、response

// 获得响应体的内容，格式受XMLHttpRequest.responseType的影响 。
//可以直接输出查看返回值是什么
console.log(XMLHttpRequest.response)

5.1.6、timeout

//设置超时时间，单位毫秒

• 示例

var xhr = new XMLHttpRequest();
xhr.open('GET', '/server', true);

xhr.timeout = 2000; // 超时时间，单位是毫秒

xhr.onload = function () {
  // 请求完成。在此进行处理。
};

xhr.ontimeout = function (e) {
  // XMLHttpRequest 超时。在此做某事。
};

xhr.send();

5.2、XMLHttpRequest的方法

5.2.1、abort

//如果该请求已被发出，XMLHttpRequest.abort() 方法将终止该请求。当一个请求被终止，它的  readyState 将被置为 XMLHttpRequest.UNSENT (0)，并且请求的 status 置为 0。

• 实例

//当点击按钮取消请求
按钮.onclick=function(){
	XMLHttpRequest.abort()
}

5.2.2、getAllResponseHeaders()

//XMLHttpRequest.getAllResponseHeaders() 方法返回所有的响应头

• 一个原始的响应头

date: Fri, 08 Dec 2017 21:04:30 GMT\r\n
content-encoding: gzip\r\n
x-content-type-options: nosniff\r\n
server: meinheld/0.6.1\r\n
x-frame-options: DENY\r\n
content-type: text/html; charset=utf-8\r\n
connection: keep-alive\r\n
strict-transport-security: max-age=63072000\r\n
vary: Cookie, Accept-Encoding\r\n
content-length: 6502\r\n
x-xss-protection: 1; mode=block\r\n
//每一行通过\r\n来进行分割。

5.2.3、getResponseHeader

//返回指定的响应头
语法格式：
var myHeader = XMLHttpRequest.getResponseHeader(name);
//name：表示要会返回的报文项名称
注意:报文项值，如果连接未完成，响应中不存在报文项，或者被W3C限制，则返回null。

5.2.4、open

//语法格式
XMLHttpRequest.open(method.url.async)
//method
需要使用HTTP方法，设置请求方式比如：GET POST PUT DELETE
//url
设置请求地址
//async
一个可选的布尔参数，表示是否异步执行操作，默认为true。如果值为false，send()方法直到收到答复前不会返回。如果true，已完成事务的通知可供事件监听器使用。如果multipart属性为true则这个必须为true，否则将引发异常。

5.2.5、send

//解释
XMLHttpRequest.send() 方法用于发送 HTTP 请求。如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。XMLHttpRequest.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。

//语法：
XMLHttpRequest.send(body)

5.2.6、setRequestHeader

//解释
XMLHttpRequest.setRequestHeader() 是设置HTTP请求头部的方法。此方法必须在  open() 方法和 send()   之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。

如果没有设置 Accept 属性，则此发送出send() 的值为此属性的默认值*/* 。
//语法格式
XMLHttpRequest.setRequestHeader(header,value)
//header
属性的名称
//value
属性的值

5.3、XMLHttpRequest的事件

5.3.1、onreadystatechange

//解释
XMLHttpRequest.onreadystatechange 会在 XMLHttpRequest 的readyState 属性发生改变时触发 readystatechange 事件的时候被调用。
//语法格式
XMLHttpRequest.onreadystatechange = callback;
//当readyState的值发生改变的时候，回调函数(callback)会被调用

5.3.2、abort

XMLHttpRequest.onabort=function(){
	//当一个请求终止时 abort 事件被触发
}

5.3.3、error

XMLHttpRequest.onerror=function(){
	//当请求遇到错误时，将触发error 事件。
}

5.3.4、load

XMLHttpRequest.onload=function(){
	//当一个XMLHttpRequest请求完成的时候会触发load 事件。
}

5.3.5、timeout

XMLHttpRequest.ontimeout=function(){
	//当进度由于预定时间到期而终止时，会触发timeout 事件。
}

二、jQuery中的AJAX

2.1、get请求

//语法:$.get(url, [data], [callback], [type])
url:请求的URL地址。

data:请求携带的参数。

callback:载入成功时回调函数。

type:设置返回内容格式。

$("button").eq(0).click(function (){
 $.get("http://127.0.0.1/info?a=1&b=2",{
     userName:"zhangsan",// userName=zhangsan&age=100
     age:100
 },function(res){
     // 当接收到数据之后执行。res是响应体的数据，默认格式为json
     console.log("回调函数",res)
 },"text")
})

2.2、post请求

//$.post(url, [data], [callback], [type])
url:请求的URL地址。

data:请求携带的参数。

callback:载入成功时回调函数。

type:设置返回内容格式。

$("button").eq(1).click(function (){
  // 第一个参数是请求地址，第二个参数是放置在请求体的内容,第三个参数是回调函数，用于接收响应内容。
  $.post("http://127.0.0.1/info",{
      userName:"laowang",
      age:90
  },function (res){
      console.log(res);
  },"text")
})

• 服务器代码

// 1、引入 express 模块

const express=require('express')
// 静态地址 会默认找出index文件
const path=express.static(__dirname)
// 2、创建服务
const app=express();
app.use(path)
// 3、搭建路由
app.get('/jq',(request,response)=>{


    // 设置响应
    response.json({
        ok:1,
        msg:'信息'
    })
})
//4、 设置端口，启动服务
app.listen(80,()=>{
    console.log('success')
})

• 备注个人敲代码问题

如果设置静态路径，那么需要在游览器敲地址：http://127.0.0.1 会自动找index文件（建议页面文件用index命名）
点击按钮，就会获取服务端传过来的数据

//整合
 $("button").eq(2).click(function (){
            // 默认请求方式为get
            $.ajax({
                type:"post",// 请求方式
                url:"http://127.0.0.1/info",// 请求地址

                // application/x-www-form-urlencoded
                // data:{
                //     userName:"zhangsan",
                //     age:12
                // }

                // application/json
                headers:{
                    "Content-Type":"application/json"
                },
                data:JSON.stringify({
                    userName:"zhangsan",
                    age:12
                }),
                success(res){//接收数据
                    console.log(res);
                },
                error(err){
                    console.log("发生异常",err);
                },
                dataType:"text"
            })
        })