补充一下Ajax的使用方法

//可以复制下面两种方法在百度上实验
//jquery的使用方法
$.ajax({
url:"index.php",
success:function(data){
//访问到ajax取到的数据
console.log(data);
}
})
//原生的Ajax
var xhr = new XMLHhttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
xhr.open("get","index.php",true);
xhr.send(null);

完美的分割线


在上家公司,我自认为我ajax用的已经非常6,因为使用jquery的ajax已经能处理各种数据与错误,但感觉只是会用,但是并不能说出它的所以然,也并不能说出它的五个步骤:

  1. 准备发送请求   (调用 new XMLHttpRequest())   (readyState == 0)
  2. 打开一个请求   (调用open方法)   (readyState == 1)
  3. 发送请求 (调用send方法,并且接收到响应头)  (readyState == 2)
  4. 开始接受到请求 (readyState == 3)
  5. 接受完成 (readyState == 4)

所以我打算恶补一下ajax的基础,虽然它可能并没有多么高深,但是我认为以为合格的前端汪,

  • 会看懂js语法会使用js才能算入门,
  • 把语法基础基本弄明白把js的每个细胞研究一遍算初级,
  • 能够思考js算中级

而此时我应该算入门到初级的中间。

Ajax核心对象XMLHttpRequest

这个对象最早在IE中被实现,不过它最早的时候是通过ActiveXObject实现的,如果不需要管兼容的话,IE9或者其他浏览器使用 new XMLHttpRequest() 就能创建了一个 XHR (XMLHttpRequest) 对象,IE中由于存在三个版本的XHR对象,所以如果需要兼容,需要对这三个版本进行处理,从中选出IE浏览器中最新支持对象:

var xhr = null;
if (typeof XMLHttpRequest != undefined){
xhr = new XMLHttpRequest();
}else if(typeof ActiveXObject != undefined){
xhr = (function(){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
for (var i =0,ilen = versions.length;i<ilen;i++) {
try{
//避免不支持当前版本报错
new ActiveXObject[versions[i]];
//保存当前支持的版本
argument.callee.ActiveXString = versions[i];
}
catch (e) {}
}
//返回一个当前浏览器支持的版本的XHR对象
return new ActiveXObject(argument.callee.ActiveXString);
})() ;
}

上面这段代码就做了第一阶段的事情,初始化一个请求

打开一个请求 open

xhr.open(); //xhr是通过new XMLHttpRequest()返回的对象 并没有发送请求,它只定义了请求的类型,url,以及是否异步,

  如: xhr.open("get","index.html",false);

第一个参数:最常见的请求类型有post和get两种方法,

第二个参数:url如果没有指定完整的(带协议前缀的如: http://,https:// )url地址,那么它的地址相对当前执行代码的页面,

第三个参数:Ajax最优秀的地方便是可以异步同步发送请求,第三个参数false代表同步,true代表异步。

post跟get的区别

对于前端,对它能体现对大的区别就是传参不同,get的参数放在url地址后面以 ?abc=1&bcd=2&dd=3&s=4 的形式传递,而post的参数放在请求主体内,通过 xhr.send() 发送, xhr.send("任何想发送给服务器的字符串");

url

url相对与执行当前代码的页面。

在页面http://mydomin.com/test/obj/index.html中调用了xhr.send()表示请求在index.html页面发送,那么url响应的地址就是http://mydomin.com/test/obj/我的请求的url地址。

如果是一个完整的地址,那么必须是同域的情况下才允许发送请求,否在会引发安全报错,同域:同端口同协议的url地址

http://baidu.com:80

协议:http

端口:80

同步与异步的区别

同步请求必须接收完(到达第四阶段)响应才会继续往下执行代码,

而异步请求会在发出一个请求继续执行不会阻碍流程,

不管是同步或在异步当接收完完响应之后会调用onreadystatechange方法,当xhr属性的readystate的值为4(第四阶段)的时候表示接受完成 xhr.onreadystatechange = function(e){} ,除了第零阶段,几乎每个阶段都对调用onreadystatechange方法,但取决于浏览器的实现。

发送一个请求  xhr.send()

xhr.send() 阶段才是真真的发起请求阶段,几乎可以用来发送任何数据,在这个阶段,

如果是异步请求,那么调用之后就会直接执行下面的代码,

如果是同步请求,那么需要等到readyState的值为4也就是接收完所有响应之后才会往下执行。

接受响应

xhr对象有四个关于响应的属性

  • responseText    (响应文本)
  • responseXML       (如果响应头是text/xml或在application/xml那么响应数据会添加到这个属性)
  • status     (响应状态码,200,304,404,500等等)
  • statusText   (响应状态说明)

无论响应的是什么样的内容,都会把服务器返回的内容存在 xhr.responseText 中,所以有时候只需关注 xhr.responseText ,

只有响应头的类型是text/xml或在application/xml的时候 xhr.responseXML 才会填充响应数据

status

不同的状态码表示响应的状态,

0 响应失败(老版的opear可能会错误的把204作为0处理)
200 响应成功、缓存没有失效直接使用缓存(from cache)或者服务器响应成功
204 有些浏览器会错误的返回204,响应成功,但是没有数据
304 响应成功,直接读取缓存,与200(from cache)不同的是,304询问了服务器之后,服务器告知浏览器缓存没有失效可以直接使用
404 响应成功,但是没有找到对应的资源
500 响应成功,服务器内部出现错误

statusText:表示对响应状态的说明,不过有时候并不能准确解释状态,如我直接访问一个发起一个跨域的请求的时候,statusText为空,并且每个浏览器对状态的描述并不是所有的都一致。

虽然jQuery已经把所有的步骤都封装好,让技术员指需要关注成功与否,但很多时候了解其中的原理,处理问题会让人更加灵活并且得心应手。

ajax基础入门的更多相关文章

  1. Ajax基础知识《一》

    对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...

  2. SpringMVC基础入门

    一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 1 2 3 4 5 6 ...

  3. 从零基础入门JavaScript(1)

    从零基础入门JavaScript(1) 1.1  Javascript的简史 1995年的时候   由网景公司开发的,当时的名字叫livescript    为了推广自己的livescript,搭了j ...

  4. SpringMVC基础入门,创建一个HelloWorld程序

    ref:http://www.admin10000.com/document/6436.html 一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要 ...

  5. jQuery:自学笔记(1)——基础入门

    jQuery:自学笔记(1)——基础入门 认识JQuery 1.jQuery概述 jQuery是一个快速.小巧 .功能丰富的JavaScript函数库.它可以实现“写的少,做的多”的目标. jQuer ...

  6. ECMAScript 6.0基础入门教程

    ECMAScript 6.0基础入门教程 转:https://blog.csdn.net/hexinyu_1022/article/details/80778727 https://blog.csdn ...

  7. js语法基础入门(1)

    1.基础入门 1.1.hello world 1.1.1.JavaScript是什么? JavaScript是一门跨平台.面向对象的轻量级脚本语言,在web开发中被广泛应用 1.1.2.JavaScr ...

  8. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  9. 「译」JUnit 5 系列:基础入门

    原文地址:http://blog.codefx.org/libraries/junit-5-basics/ 原文日期:25, Feb, 2016 译文首发:Linesh 的博客:JUnit 5 系列: ...

随机推荐

  1. BZOJ 2631: tree( LCT )

    LCT...略麻烦... -------------------------------------------------------------------------------- #inclu ...

  2. django学习之Model(四)MakingQuery

    上一篇写到MakingQuey中的filter,本篇接着来. 10)-扩展多值的关系 如果对一个ManyToManyField或ForeignKey的表进行filter过滤查询的话,有2中方法可以用. ...

  3. ORACLE存储过程笔记2

    ORACLE存储过程笔记2 运算符和表达式     关系运算 =等于<>,!=不等于<小于>大于<=小于等于>=大于等于       一般运算   +加-减*乘/除 ...

  4. linux c 得到时间

    ctime: 将时间和日期以字符串格式表示头文件: time.h函数定义: char *ctime(const time_t *timep); 应用举例:#include <stdio.h> ...

  5. 查询某库所有表的rows &查看当前sql的注册信息

    查询某库所有表的rows &查看当前sql的注册信息 1 2 3 4 5 6 7 select sobj.name,spar.rows FROM sys.objects sobj  INNER ...

  6. js中exec、test、match、search、replace、split、indesOf()用法

    exec:对string进行正则处理,并返回匹配结果.array[0]为原字符串,array[i]为匹配在整个被搜索字符串中的位置. test:测试string是否包含有匹配结果,包含返回true,不 ...

  7. 从头学Qt Quick系列

    http://www.cnblogs.com/csulennon/category/686605.html

  8. cocos2d-x游戏开发系列教程-坦克大战游戏之敌方坦克AI的编写

    在上篇我们完成了子弹和地图碰撞的检测,在这篇我们将完成敌方坦克AI的编写. 具体思路是屏幕中保持有四个敌方坦克,然后坦克随机方向运动,并且子弹消失后1秒发射一次 1.我们新建一个敌方坦克的AI类来控制 ...

  9. 基于visual Studio2013解决C语言竞赛题之0801信息输出

     题目

  10. BZOJ 2705: [SDOI2012]Longge的问题( 数论 )

    T了一版....是因为我找质因数的姿势不对... 考虑n的每个因数对答案的贡献. 答案就是 ∑ d * phi(n / d) (d | n) 直接枚举n的因数然后求phi就行了. 但是我们可以做的更好 ...