JS完成Ajax请求原生JS完成Ajax请求

89 阅读 0 评论 59 点赞

我是靠谱客的博主高大画板，这篇文章主要介绍JS完成Ajax请求原生JS完成Ajax请求，现在分享给大家，希望可以做个参考。

原生JS完成Ajax请求

自己写微信公众号页面的时候需要使用ajax请求，但是使用vue写的为了ajax请求导入JQuery影响加载速度就用原生的封装一个。
在这里插入图片描述

XMLHttpRequest

Ajax的核心是XMLHttpRequest

1. 创建一个对象XMLHttpRequest

复制代码

1
2
var XMLHttp = new XMLHttpRequest()

注意老版本的 IE（IE5 和 IE6）使用 ActiveX 对象

复制代码

1
2
var XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");

为了自适应浏览器，包括 IE低版本，先检查浏览器是否支持 XMLHttpRequest 对象。
如果支持，则创建 XMLHttpRequest 对象。
如果不支持，则创建ActiveXObject 。

复制代码

1
2
3
4
5
6
7
8
9
var XMLHttp;
  if (window.XMLHttpRequest){
    // 目前主流阅览器
    XMLHttp =new XMLHttpRequest();
  } else {
    //IE低版本
    XMLHttp =new ActiveXObject("Microsoft.XMLHTTP");
  }

2. 向服务器发送请求

获取实例后向服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法。

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

string：仅用于 POST 请求

复制代码

1
2
3
XMLHttp.open("GET","www.baidu.com",true);
XMLHttp.send();

这里有几点问题：

使用GET 还是 POST

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库。GET请求的文件会缓存所以安全性不高。）
向服务器发送大量数据（POST 没有数据量限制。GET受阅览器地址影响有字符限制，不同阅览器不同。）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET 请求传参

复制代码

1
2
3
XMLHttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
XMLHttp.send();

这里可以看到GET请求传参时是将参数带到URL上的。所以安全性不高，数据量也受阅览器的最大字符数量限制。

POST 请求传参

常见的POST提交数据方式(设置头部信息)

application/x-www-form-urlencoded
multipart/form-data
application/json
text/xml

setRequestHeader(header,value)
由我来组成头部

header: 规定头的名称
value: 规定头的值

application/x-www-form-urlencoded
通常请求传参就使用application/x-www-form-urlencoded头部信息.

复制代码

1
2
3
4
XMLHttp.open("POST","ajax_test.asp",true);
XMLHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
XMLHttp.send("fname=Bill&lname=Gates");

XMLHttp.send(“fname=Bill&lname=Gates”);中的值为字符串类型。

multipart/form-data
主要用于上传文件

application/js
用来告诉服务端消息主体是序列化后的 JSON 字符串。
由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数。

复制代码

1
2
3
4
5
var data={name:'goatling'}
XMLHttp.open("POST","ajax_test.asp",true);
XMLHttp.setRequestHeader("Content-type","application/json;charset=utf-8");
XMLHttp.send(JSON.stringify(data));

async 的问题就不说了，你还想同步阻塞不成。

3.服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

4.readystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发== onreadystatechange== 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status

200: “OK”
404: 未找到页面

复制代码

1
2
3
4
5
6
xmlhttp.onreadystatechange=function(){
   if (xmlhttp.readyState==4 && xmlhttp.status==200){
     document.getElementById("DIV").innerHTML=xmlhttp.responseText;
   }
}

5.总结

复制代码

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function ajax(opt) { //ajax请求封装(methods,url,data)
       opt = opt || {};
       opt.method = opt.method.toUpperCase() || 'POST';
       opt.url = opt.url || '';
       opt.async = opt.async || true;
       opt.data = opt.data || null;
       opt.success = opt.success || function () {};
       //上面为初始化数据，没有就默认值
       
       var xmlHttp = null;
       if (XMLHttpRequest) {
           xmlHttp = new XMLHttpRequest();
       } else {
           xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
       }
       //这步判断自适应低版本IE阅览器
       
       var params = [];
       for (var key in opt.data) {
           params.push(key + '=' + opt.data[key]);
       }
       //这步获取传递参数
       
       var postData = params.join('&');
       //这步将数组内参数转化为字符串，"a=1&b=2"格式
       if (opt.method.toUpperCase() === 'POST') {
           //POST时定义头部信息，这里使用了第一种方法。
           xmlHttp.open(opt.method, opt.url, opt.async);
           xmlHttp.setRequestHeader('Content-Type',
               'application/x-www-form-urlencoded;charset=utf-8');
           xmlHttp.send(postData);
       } else if (opt.method.toUpperCase() === 'GET') {
          //GET时使用Url传递参数的方法
           xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
           xmlHttp.send(null);
       }
       
       xmlHttp.onreadystatechange = function () {
           if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
              //请求已完成，且响应已就绪返回数据
               opt.success(xmlHttp.responseText);
           }
       };
   }

复制代码

1
2
3
4
5
6
7
8
ajax({
 method:'GET',
 url:'www.baidu.com',
 data:{},
 success:function(res){
 }
})

这里没有做报错处理，可以在readyState == 4 && xmlHttp.status != 200时添加报错返回。
也可以使用promise来做处理更优雅，这里就不写了。
在这里插入图片描述

最后

以上就是高大画板最近收集整理的关于JS完成Ajax请求原生JS完成Ajax请求的全部内容，更多相关JS完成Ajax请求原生JS完成Ajax请求内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：前端
浏览次数：89 次浏览
发布日期：2023-09-15 14:35:33
本文链接：https://www.kaopuke.com/article/k-p-k_14_uzo_6_f5_13_j_2_x.html

JS完成Ajax请求原生JS完成Ajax请求

原生JS完成Ajax请求

XMLHttpRequest

1. 创建一个对象XMLHttpRequest

2. 向服务器发送请求

open(method,url,async)

send(string)

使用GET 还是 POST

GET 请求传参

POST 请求传参

3.服务器响应

4.readystatechange 事件

5.总结

最后

评论列表共有 0 条评论

发表评论取消回复

JS完成Ajax请求原生JS完成Ajax请求

原生JS完成Ajax请求

XMLHttpRequest

1. 创建一个对象XMLHttpRequest

2. 向服务器发送请求

open(method,url,async)

send(string)

使用GET 还是 POST

GET 请求传参

POST 请求传参

3.服务器响应

4.readystatechange 事件

5.总结

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

发表评论取消回复