Javascript中的ajax

最新推荐文章于 2024-06-19 11:25:09 发布

Knight7890

最新推荐文章于 2024-06-19 11:25:09 发布

阅读量636

点赞数 1

分类专栏： javascript 文章标签： XMLHttpRequest ajax javascript

本文链接：https://blog.csdn.net/Knight7890/article/details/51569275

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

当初面试html5前端工程师，被一家上市软件公司的技术面试官提过一个问题。

原生js中ajax是基于什么对象？

我当初用的比较熟练的是jQuery框架，我当时只知道用jquery中的$ajax()方法调用，而真是不知道原生的ajax是基于什么对象，我思考了一会儿，也老实的回答了面试官的问题，我说：“这个我真的不知道，回去我在仔细看看！”

然后就谦虚的问面试官，ajax是基于什么对象，他也耐心的给我回到了，说是：“xhr:----xmlhttpRequest然后就给我耐心的解释，这个名字我有点印象，当时听得还是有些模糊，后来回去就仔细的看了一下原生js中的ajax到底是什么鬼？(IE5 和 IE6 使用 ActiveXObject)

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();//也就是要new一个对象，这个是核心，记住。
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

后来我还是被这家公司给录用了，这个咋们先不谈，还是先谈谈ajax是什么？

我想大家应该都知道，弹幕这个概念吧，举个最简单的例子，比如lol直播，上面会弹出好多的用户发表的观点，这就是ajax的异步加载，其目的在于“不刷新、不跳转”页面的情况下通过服务器请求异步完成。

这样可以降低服务器的负载，减少用户等待时间，加快响应速度。

而ajax的核心了，xmlhttpRequest,简称xhr(小黄人)，这个东西名字一大堆，到底是个什么鬼呢？

其实很好理解，咋们把它拆开，xml指的是可扩展标记语言，和json类似，json是一种文件的格式，这个要是你不知道，赶紧去百度。

http,大家肯定熟悉，等会后面会重点说它。Request,也就是请求。

ajax就是先是通过http向服务器发送请求，然后得到服务器的响应，然后得到回馈。这句话很重要，请大家记住，接下来说的更重要，请大家也要记住，不懂得就百度。

一个Http请求一般由四部分组成。

1、http请求的方法或动作，比如是get还是post

2、正在请求URL(可以使json文件)总得知道请求的地址是什么吧

3、请求头，包含一些客户端环境信息，身份验证信息等

4、请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等。

请求完了之后，就会得到http响应，一个http响应一般由三部分组成。

1、一个数字和父子组成的状态码，用来请求是成功还是失败

2、响应头也和请求头一样，包含许多有用的信息，例如服务器类型，日期时间，内容类型和长度等。

3、响应体，也就是响应正文。

 function ajax() {
10 
11           //先声明一个异步请求对象，判断兼容
12           var xmlHttpReg = null;
13           if (window.ActiveXObject) {//如果是IE
14 
15               xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");
16 
17           } else if (window.XMLHttpRequest) {
18 
19               xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg
20           }
21 
22           //如果实例化成功,就调用open()方法,就开始准备向服务器发送请求，
23           if (xmlHttpReg != null) {
24               xmlHttpReg.open("get", "About.aspx", true);1
25                xmlHttpReg.send(null);
26               xmlHttpReg.onreadystatechange = doResult; //设置回调函数
27              //  open()和send()是xhr对象中的一个方法。详细的可以去百度一下
28           }
29 
30           //回调函数
31           //一旦readyState的值改变,将会调用这个函数,readyState=4表示完成相应
32 
33           //设定函数doResult()
34           function doResult() {
35           // 这段代码可能对于初学者理解起来可能有点困难，可以百度去看下readyState和status，当它们值等于4和200时，表示执行完成和成功，不懂得可以话可以强行记下来。
36               if (xmlHttpReg.readyState == 4) {//4代表执行完成37                  38                  39                   if (xmlHttpReg.status == 200) {//200代表执行成功40                       //将xmlHttpReg.responseText的值赋给ID为resText的元素41                       document.getElementById("resText").innerHTML = xmlHttpReg.responseText;
                   //responseText也是基于对象下的一种方法，获得字符串形成的响应数据。
42                       43 44                   }45               }46 47           }48         49 50       }