js之原生ajax、Jquery-$.ajax、自定义ajax（post请求、get请求）

---

ajax: 浏览器和服务器数据交互的网页技术 异步的xml和javascript

下文中会用到qs这个序列化工具，将js对象转换成所需的查询字符串或表单格式

一、发送请求四个步骤

//1.创建实例
var xhr=new XMLHttpRequest();
//2.打开链接
xhr.open('请求方法','请求 url地址');
//2.1设置请求头
xhr.setRequestHeader('Content-Type','application/json');
//3.发送请求
xhr.send();

//4.接收响应
xhr.onreadystatechange=function(){
	if(xhr.readyState===4&&xhr.status===200){
		console.log(JSON.stringify(xhr.responseText))
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注意： 服务器返回给客户端的数据都是json格式，如果最后，接收到的不是json格式，则是使用的第三方库帮忙转化的。

上述代码，相关说明

1.open(method,url)

参数：
mthod： 取值可以为GET/POST/HEAD/DELETE/OPTIONS/PUT
url: 请求的主体，发送请求的接口地址

2.requestHeader(属性名称, 属性值)

在AJAX中，如果要post特定格式的数据，需要使用 setRequestHeader() 方法来添加 HTTP 头，否则，后台可能接收不到需要的数据。数据通过send()方法发送，setRequestHeader()方法需要在open()和send()方法之间调用。

• 常用的数据格式(编码可带可不带)

  • 发送json格式数据

  xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
  1

  • 发送表单数据

  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
  1

  • 发送纯文本(不指定Content-type时，此是默认值)

  xhr.setRequestHeader('Content-type', 'text/plain; charset=utf-8');
  1

  • 发送html文本

  xhr.setRequestHeader('Content-type', 'text/html; charset=utf-8');
  1

3.send()设置发送的数据，开始和服务器端交互

参数： 请求主体内容，如果没有，为null，或者省略。post携带的参数才会在send中发送。

注意：
如果发送的请求携带参数

get： 请求参数以查询字符串的方式拼接在url后方

//请求设置一
xhr.open('get','http:127.0.0.1:8080?a=1&b=2');
let obj={
	a:1
	b:2
}
//请求参数设置二（使用qs转换工具）
xhr.open('get',url路径+Qs.stringify(obj));
1
2
3
4
5
6
7
8

post： 请求参数需要传入send()中发送，并且需要根据设置的请求头，发送对应格式的数据

	let obj={
		a:1
		b:2
	}
	//1.json数据格式 
	//告诉后端你传递得数据格式是什么
	xhr.setRequestHeader('Content-type', 'application/json');
	//发送数据
	xhr.send(JSON.stringify(obj));
	
	//2.表单格式数据 Qs.stringify(obj);
	//告诉后端你传递得数据格式是什么
	xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	//发送数据(方法一)
	xhr.send(Qs.stringify(obj));
	//发送数据(方法二)
	xhr.send('a=1&b=2');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4.接收响应，获取数据

发送请求后，会收到响应，收到响应后，XHR对象的以下属性会被填充上数据。

• responseText： 作为响应体返回的文本。

• responseXML： 如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档。

• status： 响应的 HTTP 状态。

• statusText： 响应的 HTTP 状态描述。

• readyState： 返回HTTP请求状态
  0 open()尚未调用 UNSENT
  1 open()已调用 OPENED
  2 接收到头信息 HEADERS_RECEIVED
  3 接收到响应主体 LOADING
  4 响应完成 DONE

• readystatechange: 请求状态改变事件
  当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发该事件

二、原生get请求

//创建实例
var xhr=new XMLHttpRequest();
//设置与服务器交互的信息
xhr.open('get','http://127.0.0.1:8000?a=1&b=2');
//发送请求
xhr.send();
//接收响应
xhr.onreadystatechange=function(){
	if(xhr.readystate===4&&xhr.status===200){
		console.log(JSON.stringify(xhr.responseText))
	}
}
1
2
3
4
5
6
7
8
9
10
11
12

三、原生post请求

//创建实例
var xhr=new XMLHttpRequest();
//设置与服务器交互的信息
xhr.open('post','http://127.0.0.1:8000');
//设置请求头
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
//发送请求
xhr.send('a=1&b=2');
//接收响应
xhr.onreadystatechange=function(){
	if(xhr.readyState===4&&xhr.status===200){
		console.log(JSON.stringify(xhr.responseText))
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

四、JQuery-$.ajax

1 ajax请求（通用请求）

	$.ajax({
                //url
                url: 'http://127.0.0.1:8000/jquery-server',
                //请求参数
                data: {a:100, b:200},
                //请求类型
                type: 'GET',
                //响应体结果
                dataType: 'json',
                 //请求头信息
                headers: {
                   Content-Type:'application/json',
                   Authrization:token,
                },
                 //超时时间
                timeout: 2000,
                //成功的回调
                success: function(data){
                    console.log(data);
                },
                //失败的回调
                error: function(){
                    console.log('出错啦!!');
                },
               
            });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

2 get 请求

$.get(url, [data], [callback], [type])
url: 请求的 URL 地址。
data: 请求携带的参数。
callback: 载入成功时回调函数。
type: 设置返回内容格式，xml, html, script, json, text, _default。

  var obj = {
      page: 1,
      pageSize: 10
  }
  url='http://127.0.0.1:8080'
 $.get(url, obj, function(res) {
      console.log(res)
  })
1
2
3
4
5
6
7
8

2 post 请求

同get一样使用
$.post(url, [data], [callback], [type])
url: 请求的 URL 地址。
data: 请求携带的参数。
callback: 载入成功时回调函数。
type: 设置返回内容格式，xml, html, script, json, text, _default。

五、自定义$.ajax

该自定义ajax默认发送表单格式的数据
_ajax.js

function resloveData(data) {
    let arr = []
    for (let i in data) {
        var str = i + '=' + data[i]
        arr.push(str)
    }

    return arr.join('&')
}

function _ajax(data) {
    var xhr = new XMLHttpRequest()
    var qs = resloveData(data.data)

    if (data.method.toUpperCase() === 'GET') {
        xhr.open(data.method, data.url + qs);
        xhr.send()
    } else if (data.method.toUpperCase() === 'POST') {
        xhr.open(data.method, data.url);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(qs);
    }
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var res = JSON.parse(xhr.responseText);
            data.success(res);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

test.html

<script src="./_ajax.js"></script>
<script>
    // 2. 调用自定义的 itheima 函数，发起 Ajax 数据请求
 	  _ajax({
        method: '请求类型',
        url: '请求地址',
        data: { /* 请求参数对象 */ },
        success: function(res) { // 成功的回调函数
            console.log(res)     // 打印数据
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12