AJAX总结（二），手写AJAX

娣辩孩发布于2019-08-20 13:41 / 2074人阅读

摘要：创建对象指定响应函数打开连接指定请求发送请求创建响应函数注第三步是使用对象的方法，字面意思是打开的意思，即打开连接。

前言

博主博客：Stillwater的博客
知乎专栏：前端汪汪
本文为作者原创转载请注明出处：
http://hiztx.top/2017/01/12/a...

在前端面试的时候经常会有如下情景。AJAX会吗？能不能手写个AJAX？第一个问题可以参见我的另一篇博客，AJAX总结（一），AJAX概述。这篇博文我们来回答第二个问题，手写AJAX。

一、手写AJAX的步骤

手写AJAX并没有一个固定的标准的答案，但是AJAX的关键步骤就那么几步，我会先用文字介绍关键步骤，然后给出两个版本的手写AJAX的代码及注释。帮助大家很好地理解和记忆。

创建XMLHttpRequest对象

指定响应函数

打开连接（指定请求）

发送请求

创建响应函数

注：第三步是使用XMLHttpRequest对象的open（）方法，字面意思open是打开的意思，即打开连接。但是准确的说应该是指定Http请求。因为浏览器在使用AJAX技术与服务通信时，发送的是Http请求，那么就要指定Http的请求方法，url等信息。

二、参考代码（W3C）

var xmlhttp=null;//声明一个变量，用来实例化XMLHttpRequest对象
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();// 新版本的浏览器可以直接创建XMLHttpRequest对象
  }
  
else if (window.ActiveXObject)
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");// IE5或IE6没有XMLHttpRequest对象，而是用的ActiveXObject对象
  }
  
  
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;//指定响应函数为state_Change
  xmlhttp.open("GET","/example/xdom/note.xml",true);//指定请求，这里要访问在/example/xdom路径下的note.xml文件，true代表的使用的是异步请求
  xmlhttp.send(null);//发送请求
  } 
else
  {
  alert("Your browser does not support XMLHTTP.");
  }

//创建具体的响应函数state_Change
function state_Change()
{
if (xmlhttp.readyState==4)
  {
  if (xmlhttp.status==200)
    {
    // 这里应该是函数具体的逻辑
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}

创建XMLHttpRequest对象（1-10行代码）

指定响应函数（第15行代码）

打开连接（指定请求）（第16行代码）

发送请求（第18行代码）

创建响应函数（25-38行代码）

这个是W3C上讲解AJAX的代码，比较权威，我做了一些注释，方便大家理解。面试的时候写这段代码应该是没有问题的。
W3C原文链接

三、参考代码（MDN）



  Make a request

创建XMLHttpRequest对象（第13行代码）

指定响应函数（第19行代码）

打开连接（指定请求）（第21行代码）

发送请求（第23行代码）

创建响应函数（29-37行代码）

这个是MDN上讲解AJAX的代码，我做了一些注释，方便大家理解。
MDN原文链接

四、总结

这篇文章讲解了如何较为规范的手写AJAX，下篇文章我会具体介绍XMLHttpRequest对象的有关知识以及AJAX相关的Http请求的知识。

服务器托管云服务器 ajax() ajax? ajax _AJAX

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81185.html

laravel5.5手写教程4Eloquent ORM分页及软删除

摘要：从而达到了软删除。不过，你可以通过在查询中调用方法来强制查询已被软删除的模型方法也可以被用在关联查询只取出软删除数据会只取出软删除数据恢复被软删除的模型有时候你可能希望取消删除一个已被软删除的模型。 Laravel 有三宝，路由、容器和 Eloquent ORM，Eloquent ORM。我个人一直比较推荐于在实际操作中学习，之前简单了解了路由和Eloquent ORM的基本用法，今天...

mindwind 2019-07-01 14:20 评论0 收藏0
同源策略与CORS跨域

摘要：所以浏览器认为这是安全的。如果你细心的话你会发现，其实请求已经发送出去了，你只是拿不到响应而已。所以浏览器这个策略的本质是，一个域名的，在未经允许的情况下，不得读取另一个域名的内容。但浏览器并不阻止你向另一个域名发送请求。同源策略与CORS跨域 PS:这篇文章是紧接着JSONP原理和Ajax学习与理解写的,有些内容是承接了上两篇文章.这篇文章只算是我的个人学习笔记,内容没有经过精心排...

ninefive 2019-08-23 10:34 评论0 收藏0
手写 AJAX

摘要：在事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。当等于且状态为时，表示响应已就绪完整版可以加个简化版看前面的就行了请求成功看前面的就行了在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200 时，表示响应已就绪： //完整版 var request = new XM...

brianway 2019-08-26 10:15 评论0 收藏0
前端基础汇总

摘要：及相关问题数据类型函数中指向原型作用域闭包面向对象对象创建模式继承严格模式与对象转换的方法添加属性，根据原型创建区别新特性解构赋值简化对象写法剪头函数三点运算符模板字符串形参默认值异步过程深拷贝与浅拷贝赋值与浅拷贝的区别浅拷贝的几种方法实现 js及es相关问题数据类型函数中this指向——————原型作用域闭包——————面向对象对象创建模式继承——————Es5严格模式Json与j...

2json 2019-08-23 16:58 评论0 收藏0
前端基础汇总

摘要：及相关问题数据类型函数中指向原型作用域闭包面向对象对象创建模式继承严格模式与对象转换的方法添加属性，根据原型创建区别新特性解构赋值简化对象写法剪头函数三点运算符模板字符串形参默认值异步过程深拷贝与浅拷贝赋值与浅拷贝的区别浅拷贝的几种方法实现 js及es相关问题数据类型函数中this指向——————原型作用域闭包——————面向对象对象创建模式继承——————Es5严格模式Json与j...

laznrbfe 2019-08-29 18:38 评论0 收藏0