摘要:创建对象指定响应函数打开连接指定请求发送请求创建响应函数注第三步是使用对象的方法,字面意思是打开的意思,即打开连接。
前言
博主博客: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原文链接
Make a request
创建XMLHttpRequest对象 (第13行代码)
指定响应函数(第19行代码)
打开连接(指定请求)(第21行代码)
发送请求(第23行代码)
创建响应函数(29-37行代码)
这个是MDN上讲解AJAX的代码,我做了一些注释,方便大家理解。
MDN原文链接
这篇文章讲解了如何较为规范的手写AJAX,下篇文章我会具体介绍XMLHttpRequest对象的有关知识以及AJAX相关的Http请求的知识。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/81185.html
摘要:从而达到了软删除。不过,你可以通过在查询中调用方法来强制查询已被软删除的模型方法也可以被用在关联查询只取出软删除数据会只取出软删除数据恢复被软删除的模型有时候你可能希望取消删除一个已被软删除的模型。 Laravel 有三宝,路由、容器和 Eloquent ORM,Eloquent ORM。我个人一直比较推荐于在实际操作中学习,之前简单了解了路由和Eloquent ORM的基本用法,今天...
摘要:所以浏览器认为这是安全的。如果你细心的话你会发现,其实请求已经发送出去了,你只是拿不到响应而已。所以浏览器这个策略的本质是,一个域名的,在未经允许的情况下,不得读取另一个域名的内容。但浏览器并不阻止你向另一个域名发送请求。 同源策略与CORS跨域 PS:这篇文章是紧接着JSONP原理和Ajax学习与理解写的,有些内容是承接了上两篇文章.这篇文章只算是我的个人学习笔记,内容没有经过精心排...
阅读 3607·2021-09-02 15:11
阅读 4517·2021-08-16 10:47
阅读 1532·2019-08-29 18:35
阅读 3013·2019-08-28 17:54
阅读 2826·2019-08-26 11:37
阅读 1475·2019-08-23 16:51
阅读 1781·2019-08-23 14:36
阅读 1785·2019-08-23 14:21