之前对于ajax没有详细的学习,只是碰到的时候,就记一点,不是很有条理。虽然常用的都会用,但真经不起询问,知其然而不知其所以然,所以专门看了一下《JavaScript高级程序设计》中对ajax的讲解。

  本文基本都摘抄自《JavaScript高级程序设计》

  ajax其实就是使用window对象的XMLHttpRequest对象,这个对象和其他的Date,Array一样,都是window对象自带的,所以声明一个XMLHttpRequest实例对象也和声明Date,Array对象一样。

声明对象

var xhr = new XMLHttpRequest();

  此处没有考虑IE,因为在实际开发过程中,一般不会使用原生的js,都是用jquery,所以不用考虑兼容性,我们只需要知道原理即可。

  

设置请求参数

xhr.open("请求的方法","请求的URL","是否以异步方式请求")

  请求的方法可以使get、post、put、delete等,http协议支持的应该都是可以的,只不过最常用的是get和post,并且这里不区分大小写。

  请求的URL,需要注意的是,不要跨域,即只能请求和当前脚本在同一个域下面的资源,也就是请求的host:port和当前的执行脚本的host:port必须相同。如果想跨域请求的话,就另当别话,后面会提。

  是否以异步方式请求,同步和异步就不说了,推荐使用异步,即这里设为true。如果使用同步的话,浏览器会出现警告,不过会继续运行,可以忽略警告。

设置http头部信息

xhr.setRequestHeader("key","value");

  实际开发中,请求接口可能需要请求方携带者颁发给自己的token或者cert,很多时候就是通过将这些token或者cert添加在header中的。

  发送的header,可以在浏览器的network中,选择对应的请求文件,查看header一栏,找到Request Header。

  

发送请求

xhr.send();

  send方法可以接受参数,当然也可以不传,《js高程》中说即使不需要发送数据,也必须传入null。

  执行完这条语句后,就真的是发起请求了,可以在浏览器控制台查看network。

  需要注意的是:

  send方法传递非null参数的情况只适用于post方法。如果是以get方式请求,此时即使传递给send方法的参数,传递的参数也不会发送。

  如果是以get方式请求,不要将数据写在send方法中,可以在请求的URL后面增加查询参数,就像host:port/index.php?name="abc"。需要注意的是,像老一点的IE,是不会自动编码URL的,所以一定要使用encodeURIComponent(string)编码后再连接到URL中。

  如果是以post方式发送,那么可以在send方法中传递要发送的数据,但是,必须制定header,比如设置Content-Type为x-www-form-urlencoded,然后在将数据写在send方法中,如果不指定header,那么数据也是能发送的,如果后端是PHP,虽然不能使用$_POST来接收send中发送的数据,但是可以使用下面的方法来获取数据:

$post_data = file_get_contents('php://input');

  但是,强烈推荐,设置header,这样后端处理比较方便。

  另外,

  如果不加header,在浏览器中console中可以看到发送数据的格式是Request Payload;

  加上header,比如Content-Type为x-www-form-urlencoded,发送的数据就是Form Data;

  关于Request PayLoad和Form Data的区别,网上很多博客讲解,这里就不抄了。

对返回值进行接收处理 

  可以通过console.log(window)来找到XMLHttpRequest对象,以及XMLHttpRequest对象下面的各种属性和事件方法。

  常用的属性如下:

  responseText -> 作为响应主体被返回的文本;

  responseXML -> 如果后端程序在返回的数据是,设置Content-Type为text/xml或者application/xml,那么就用这个属性接收xml格式的响应内容。

  status  -> http状态码;

  readyState -> 反映出xhr对象请求数据进行哪个阶段,注意并不是调用send之后,他的值才变。

    0  -> 尚未初始化,未调用open方法;

    1  -> 调用了open方法;

    2 -> 调用了send方法;

    3 -> 接收到部分数据;

    4 -> 数据全部接收完成,可以使用了。

而对于处理结果,常用的事件有 readyStateChange,对应的事件处理程序是onreadyStateChange,从名称就能想出来它和readyState的关系吧。

所以通常为该事件处理程序绑定一个函数。做法如下:

var xhr = new window.XMLHttpRequest();
xhr.open("post","recieve.php?id=name",true);
xhr.setRequestHeader("myToken","abcdefghti");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("name=abc&age=10");
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if((xhr.status==200 && xhr.status<300) || xhr.status==304){
console.log(xhr.responseText);
} else {
console.log("请求失败,响应码:" + xhr.status)
}
}
}

  

超时设定

  xhr对象有一个timeout属性,表示在发起请求后,多少毫秒内还没有收到结果,就会触发timeout事件,对应的是ontimeout事件处理程序。

  注意,一旦超过设定的超时时间,就会canceled(取消请求),即不会再关注响应的结果,已经将此次请求认定为失败了。

var xhr = new XMLHttpRequest();
xhr.open("get","recieve.php",true);
xhr.send();
xhr.timeout = 1000;//1秒超时
xhr.ontimeout = function(){
console.log("Request Timeout")
}
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if((xhr.status==200 && xhr.status<300) || xhr.status==304){
console.log(xhr.responseText);
} else {
console.log("请求失败,响应码:" + xhr.status)
}
}
}

  

  

Ajax的使用~~~整理的更多相关文章

  1. 初步认识ajax(个人整理)

    通过使用ajax可以实现页面的部分动态化 ajax可以发送一个请求去服务端,而服务端则发送回一小段数据给客户端,这样就可以避免加载整个页面,因为很多时候页面只需要刷新某一部分的数据,而其他大部分体就不 ...

  2. AJAX结合PHP整理复习

    Ajax主要的功能是实现了浏览器端 异步 访问服务器:通过浏览器的XMLHttpRequest对象发出小部分数据,与服务端进行交互,服务端返回小部分数据,然后更新客户端的部分页面. 下图是一次请求成功 ...

  3. Django - Ajax基本内容整理

    将原来的请求结果普通字符串,变更为类字典的字符串 从这段代码中,可以看到,对原有函数,进行了一个try ...except....操作,进行异常捕捉,将捕捉过程及结果,存入在初始化的字典中,将字典通过 ...

  4. 【学】jQuery的源码思路6——增加each,animaion,ajax以及插件机制

    each() 插件机制 animation ajax //each() //这里第一个参数指定将this指向每次循环到的那个元素身上,而第三个参数element其实就是this本身所以和第一个参数是一 ...

  5. javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽

    运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...

  6. Django web 基础

    一.Django概述 Django大而全; 创建Django工程:django-admin startproject sitename 创建django之后生成的目录结构如下: Project Pro ...

  7. 01:django基础篇

    Django其他篇 目录: 1.1 django初探 1.2 第一个django项目 1.3 django render/redirect/HttpResponse 和 request.GET req ...

  8. 复习 | 重温jQuery和Zepto的API

    jq和zepto很相似有许多共同的api,zepto也出了很多与jq不一样的api,总的来说,两者更相似,但是zepto更轻量一点,正好公司也在用,复习这两个没错 jq中的zepto的事件和ajax我 ...

  9. Ajax学习整理

    什么是ajax?W3School中给ajax的定义是: 1.AJAX = 异步 JavaScript 和 XML. 2.AJAX 是一种用于创建快速动态网页的技术. 3.通过在后台与服务器进行少量数据 ...

随机推荐

  1. 转://Linux MultiPath多路径软件实施说明

    Multipath的工作原理 当multipath启动的时候,它通过系统命令scsi_id -eg -s /block/sdX得到proc/partitions 里面所有块设备的 UUID(unive ...

  2. 解决普通用户登录ulimit 报错问题

    [root@master1 ~]# su - fengjian-bash: ulimit: open files: cannot modify limit: Operation not permitt ...

  3. CentOS6.9 安装Oracle 11G 版本11.2.0.1.0

    安装实例与数据库 CentOS6.9 安装Oracle 11G 版本11.2.0.1.0 一.检查系统类别. 查看 系统的类别,这里是 64位系统:[root@localhost ~]# uname ...

  4. nginx做负载均衡和tomcat简单集群

    Nginx做负载均衡和TOMCAT简单集群                1.下载安装nginx及其依赖包                                               ...

  5. P1004 方格取数-洛谷luogu-dp动态规划

    题目描述 设有N \times NN×N的方格图(N \le 9)(N≤9),我们将其中的某些方格中填入正整数,而其他的方格中则放入数字00.如下图所示(见样例): A 0 0 0 0 0 0 0 0 ...

  6. Python2.7-内置函数

    具体参见:https://docs.python.org/2/library/functions.html#file 1.进制转换:bin(x), oct(x), hex(x) 把一个十进制数分别转换 ...

  7. 安全提示:IIS不要开启“WebDAV”扩展(转载)

    在IIS设置里,有一个“Web服务扩展”的设置,其中包括“WebDAV”扩展.许多人都不明白,这个“WebDAV”扩展是干嘛用的,要不要开启呢?有不少人的想法是“开启吧,以免影响网站运行,启用总比不启 ...

  8. ASP.NET Core MVC中Controller的Action,默认既支持HttpGet,又支持HttpPost

    我们知道ASP.NET Core MVC中Controller的Action上可以声明HttpGet和HttpPost特性标签,来限制可以访问Action的Http请求类型(GET.POST等). 那 ...

  9. python_第一章

    从今天开始,正式开始学习python书籍:python 编程:从入门到实践. 感兴趣的读者可以去网上搜索这本书,适合读者入门,读下来,不会有任何 晦涩难懂的知识. 1.排序: 正排:sort()    ...

  10. CF809D Hitchhiking in the Baltic States LIS、平衡树

    传送门 看到最长上升子序列肯定是DP 设\(f_i\)表示计算到当前,长度为\(i\)的最长上升子序列的最后一项的最小值,显然\(f_i\)是一个单调递增的序列. 转移:对于当前计算的元素\(x\), ...