使用ajax的urlencode,Ajax与HTTP请求

最近在学习Ajax相关的内容。谈到Ajax就不得不提HTTP协议，Ajax就是使用JavaScript来发送，一个HTTP请求，并且可以接收从服务器返回的HTTP响应。下面我们来聊一下Ajax和HTTP协议。

HTTP 协议

HTTP的全称是超文本传输协议(英文：HyperText Transfer Protocol)，它是客户端与服务器请求和响应的标准。HTTP使得客户端与服务器之间可以进行通信，传输与接收数据。更详细的定义可以查看维基百科:HTTP协议。

我们具体来看一下，HTTP的请求与响应。

HTTP 请求

HTTP请求分为四部分，格式如下所示：

1 请求的动词 路径 协议/版本

2 key1: value1

2 key2: value2

2 key3: value3

2 ...

2 Content-Type: value

2 Host: www.baidu.com

2 User-Agent: curl/7.57.0

3 (回车)

4 要上传的数据

对于第一部分，第三部分，第四部分都好理解，第二部分需要说明一下。第二部分是请求的头信息，用来描述一些元数据，服务器会根据头信息，作出相应的处理方式。

HTTP 响应

HTTP响应也有四部分，格式如下：

1 协议/版本号 状态码 状态解释

2 key1: value1

2 key2: value2

2 Content-Length: 2443

2 Content-Type: text/html

2 ...

3 (回车)

4 要下载的内容

响应部分也是一样，第一，第三部分不用多解释，第二部分返回响应头信息，客户端根据头信息，作出相应的处理操作。第四部分是请求体，即：服务器根据请求响应的内容。

Ajax

Ajax的全称是Asynchronous JavaScript and XML。在没有Ajax之前，前端想要向请求后端的数据，可以使用的方式有：

form 表单请求 『缺点：页面会刷新』

img 通过 img 标签，向服务器发送请求 『缺点：只能发送GET,页面没有刷新，只能请求图片』

script 标签请求，传递回调函数给后台，后台把数据放入回调函数中，当作参数，执行。『缺点：只能发送GET请求』(这就是jsonp)

...

以上这些方式要么需要刷新页面，要么只能发送get请求。做不到既可以发送除GET以外的请求，并且不刷新页面的效果。而Ajax就是为了解决这么一个问题出现的，说白了Ajax就是让JavaScript可以发送HTTP请求和接收HTTP响应。

Ajax 的历史

1999年微软就在IE5.0上就引入了可以让JavaScript发送请求的接口，但是一开始并没有引起重视，直到2004年Gmail的发布，才引起广泛的关注。在2005年Ajax这个词被提出。后来Ajax这个词就成为了JavaScript脚本发起HTTP通信的代名词。

Ajax 的使用

Ajax一般包括以下步骤

创建 XMLHttpRequest 实例

发出 HTTP 请求

接收服务器传回的数据

处理网页数据

Ajax 请求 前端代码

以下是一个简单的Ajax的示例：

let xhr = new XMLHttpRequest();

xhr.open('GET','http://jack.com/ajax');

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode;charset=utf-8');

xhr.onreadystatechange = ()=>{

if(xhr.readyState === 4){

if(xhr.status >= 200 && xhr.status < 300){

let string = xhr.responseText;

let obj = JSON.parse(string);

console.log('请求成功');

} else if(xhr.status >= 400){

console.log('请求失败');

}

}

}

xhr.send('a=9&b=6');

上述代码与HTTP请求方式相对应

xhr.open() 对应了HTTP请求的 请求方式、请求路径、请求的域名

xhr.setRequestHeader() 配置 请求头信息

xhr.onreadystatechange() 当状态发生改变时，判断当前的请求状态以及响应的状态。定义成功与失败的回调函数。

xhr.send() 请求的数据

Ajax 响应 node.js后端代码

以下是一个简单的node.js服务端处理HTTP响应的示例：

if(pathNoQuery === '/ajax'){

response.statusCode = 200;

response.setHeader('Access-Control-Allow-Origin','http://testa.com:8890'); //设置允许跨域请求的 源

response.setHeader('Content-Type','application/json'); //设置返回的数据形式是 JSON

response.write(`{"name":"miralce","method":"ajax"}`);

response.end();

}

上述代码跟HTTP的响应方式相对应

response.statusCode 设置状态码，告知请求的状态，成功与否

response.setHeader 设置响应的响应头信息

response.write 设置响应体数据，返回给前端的数据

response.end() 响应结束发送

Ajax 的封装

一般来说直接写Ajax代码比较多，不利于书写，所以可能需要对Ajax进行封装，利用jQuer的思路，在结合ES6的Promise：

window.jQuery.ajax = function({url,method,header,body}){

return new Promise(function(resolve,reject){

let xhr = new XMLHttpRequest();

xhr.open(method,url);

for(let key in header){

xhr.setRequestHeader(key,header[key]);

}

xhr.onreadystatechange = function(){

if(xhr.readyState === 4){

if(xhr.status >= 200 && xhr.status < 300){

resolve(xhr.responseText);

}else{

reject(xhr);

}

}

}

let bodys = '';

for(let key in body){

bodys += `${key}=${body[key]}`;

}

xhr.send(bodys);

})

}

调用的方式

$.ajax({

url: '/ajax',

method: 'post',

header: {

'Content-Type': 'application/x-www-form-urlencode;charset=utf-8',

'user': 'miracle'

},

body: {

'name': 'miracle',

'time': Date.now()

}

}).then(resText=>{

let res = JSON.parse(resText);

console.log(res);

},xhr=>{

console.log(xhr);

})

总结

Ajax技术是前端的一个里程碑，它的出现直接改变了人们对前端的认识，对前端的发展有着巨大的推动作用。也是现在的前端开发人员不得不掌握的技能之一。

以上只是本人对Ajax和HTTP简单的看法，若有写的不正确或者不好的地方，欢迎指正。

本文仅供学习与交流使用，转载请注明出处。