刚开始以为Ajax是一种新的语言,接触之后才知道,ajax是用于服务器交换数据并更新部分网页的Web应用程序的技术。

第一次看到Ajax请求代码时,感觉一脸萌逼,这些代码竟然把后台数据请求过来了,神奇啊。但是写着写着第二天再写的时候发现,代码一堆,根本没记住。

  没想到好办法,老办法,抄了十来遍,其实也就是钱三遍在抄,后边直接默写出来了。这才捋顺了思路。整理了一下想法,现在把这些想法分享一下。先把代码献上,虽然很俗套。

/**********请求流程************/
1、创建请求对象
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
var versionArr = ["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];
for(var tempVersion of versionArr){
xhr = new ActiveXObject[tempVersion];
if(xhr){
break
}
}
}else{
throw new Error("您的浏览器版本过低")
}
// 2建立连接
xhr.open("GET","url")
// 3发送请求
xhr.send(null)
// 4接收响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4&& xhr.status ==200){
var rootObj = JSON.parse(xhr.responseText)
……………………
}
}

  来,刚看完代码,这里先抛开代码。就事论代码,先从这件事开始,当你想要请求到后台数据,首先你能想到要去做什么?别说创建请求实例,一步一步按正常=逻辑倒着来。这时你应该想到肯定要先去发送请求了。那么问题来了,从哪里发送请求呢?这时候就要去想办法找这个能发送请求的东西了,然而并没有。这时候就要拿出曾经练得的一首好本领——造对象。没有请求的实例,就要先造出来一个请求实例,这就是第一步,当然了,有了他就可以往下进行了,然而发送请求也并不是随便就让发的,就像打电话,首先你得去开启电话,才可以去拨号聊天,这就是第二步,去打开一个连接,然后再进行点击拨号,发送出去你按下的号码,这就是第三部,发送请求,接下来就要处理收到的回复了。

  下面再一步一步简单解析一下

创建XMLHttpRequest请求对象,Ajax编程是通过这个对象来进行的。
由于各大厂商浏览器对XMLHttpRequest对象支持不同,尤其是IE...这里需要对不同浏览器版本进行兼容考虑。
现在大部分主流浏览器都能够支持XMLHttpRequest对象
直接使用 new XMLHttpRequest()作为请求对象;
下面是经典的IE6支持类型 new ActiveXObject("Msxml2.XMLHTTP");
最后是IE6以下支持类型new ActiveXObject("Microsoft.XMLHTTP");

当然了也有这些根本都不支持的顽固份子。。。。直接抛出错误给他们咯

然后就是打开链接 open(method,url,flag) 参数method:GET 或者POST 参数url:请求服务器的路径 参数flag 是否异步请求,现在一般都是异步啦,不设置的话会默认异步。

接下来是发送请求send() ,这里要根据请求方式不同采取发送不同的请求,如果是GET请求,send方法内的参数写一个null就行。但如果是post类型的请求,请求带有参数的haunted。这个参数要写到send方法内发送出去,另外还要设置请求头 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")请求头根据实际请求不同设置的类型页不一样,这里只写一个简单示例。

  最后一步就是接受服务器响应 可以通过控制台或者警告框测试,会有四次输出信息,因此便有了几种不同的对象状态码:

0:未初始化完成,这时只是创建了XMLHttpRequest对象,未调用open方法
1:初始化已完成,请求开始,开始调用open方法,未调用send方法
2:请求发送,就是说已经调用了send方法
3:开始接收服务器的响应。
4:读取接收服务器响应后返回的数据。(响应结束)

onreadystatechange事件会在234时被处罚。我们使用的时候一般只是关心第四部,到了第四部,才开始进行数据接收处理,当然了,进行到第四部也不一定意味着就大功告成了,还要看一下服务器响应状态;一般状态码返回值 200 404 500,

200是正常响应,还有令人头疼的的404,找不到要访问的网页,最令人崩溃的就是500了,服务器崩了。。。

这里我们可以利用请求对象的status属性查看服务器状态码;当进行到第四步且服务器状态码是200时,就是我们获取到数据开始请求之时。

第一次发文章,不熟悉套路 ,有问题的话我上线会及时回复的。

Ajax服务请求原理 简单总结的更多相关文章

  1. AJAX异步请求原理和过程

    AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方法. AJAX 基于 JavaS ...

  2. Ajax - 发送请求原理

    1,什么是ajax? Asynchronous JavaScript and XML(当然现在xml已经由json代替): 主要是用于前后台的交互(表单提交已经被废弃): 使用场景:前台获取数据.表单 ...

  3. Ajax异步请求原理的分析

    我们知道,在同步请求模型中,浏览器是直接向服务器发送请求,并直接接收.处理服务器响应的数据的.这就导致了浏览器发送完一个请求后,就只能干等着服务器那边处理请求,响应请求,在这期间其它事情都做不了.这就 ...

  4. ajax请求原理及jquery $.ajax封装全解析

    .ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...

  5. ajax请求原理

    首先分析使用ajax时候有那些不确定的因素 请求:1 请求的方式不确定 2 请求的地址不确定 3 请求是否异步不确定 4 发送的数据不确定 响应:5 返回的数据不确定 6 响应成功之后 需要处理的业务 ...

  6. SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析

    SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析 一:问题demo展示 ...

  7. Ajax与ashx异步请求的简单案例

    Ajax与ashx异步请求的简单案例: 前台页面(aspx): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  8. VueJS搭建简单后台管理系统框架 (二) 模拟Ajax数据请求

    开发过程中,免不了需要前台与后台的交互,大部分的交互都是通过Ajax请求来完成,在服务端未完成开发时,前端需要有一个可以模拟Ajax请求的服务器. 在NodeJs环境下,通过配置express可访问的 ...

  9. asp.net——Ajax与ashx异步请求的简单案例

    Ajax与ashx异步请求的简单案例: 前台页面(aspx): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

随机推荐

  1. UE4 Android相对路径转绝对路径方法笔记

    在windows端用FPaths::ConvertRelativePathToFull可以将相对路径转成绝对路径. 在Andoird端,就麻烦些.可模仿UE4源码中AndroidFile.Cpp转换相 ...

  2. shader forge卡通渲染!

    自从用了shader forge,妈妈我再也不写shader了...... 写了3种,分别用的顶点法线.法线贴图.顶点法线+法线贴图,然后还有自发光和受光两种模式,那就是6种了吧... 最后来一张sh ...

  3. CentOS下解压缩命令

    ——————————————— .tar 解包:tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!) —————— ...

  4. Object.prototype 与 Function.prototype 与 instanceof 运算符

    方法: hasOwnProperty isPrototypeOf propertyIsEnumerable hasOwnProperty 该方法用来判断一个对象中的某一个属性是否是自己提供的( 住要用 ...

  5. [转]: 两分钟彻底让你明白Android Activity生命周期(图文)!

    转自:http://blog.csdn.net/android_tutor/article/details/5772285 大家好,今天给大家详解一下Android中Activity的生命周期,我在前 ...

  6. mac下获取应用签名

    查看md5和SHA1: universalbroker.jks为签名文件 keytool -list -v -keystore universalbroker.jks 微信分享和登录平台需要去掉冒号的 ...

  7. 新浪微博AppKey大集合(share)

    本文转自:http://blog.sina.com.cn/s/blog_9e1ea13a01017y3n.html ------------------------------------------ ...

  8. 3-Spark高级数据分析-第三章 音乐推荐和Audioscrobbler数据集

    偏好是无法度量的. 相比其他的机器学习算法,推荐引擎的输出更直观,更容易理解. 接下来三章主要讲述Spark中主要的机器学习算法.其中一章围绕推荐引擎展开,主要介绍音乐推荐.在随后的章节中我们先介绍S ...

  9. 两个list取不同值

    转自同名博文,未知真正出处,望作者见谅 如题:有List<String> list1和List<String> list2,两个集合各有上万个元素,怎样取出两个集合中不同的元素 ...

  10. javascript学习笔记全记录

          js的初步了解     1.就是用来修改样式的,修改的是行内样式.任何样式都能够修改.     2.css里面怎么写js就怎么写.     3.任何元素都能加事件:事件都要小写 js的三大 ...