看了两天关于Ajax的使用,总感觉云里雾里的。

故在此总结梳理一下,如果疏漏错误还请纠正支出。

Ajax能够在向服务器请求额外的数据时,不必重新加载/卸载整个页面,实现一小块区域性的刷新,也是常说的异步更新。

它的核心是XMLHttpRequest对象(简称XMR对象)。

从对服务器的请求到接受返回来的数据,可以从上图简单先了解一下。

第一步,先新建一个XHR对象

//这里新建一个XHR对象

var xhr;

//如果你想兼容IE5的浏览器,那你必须先判断
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest(); //比较常用的
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP"); //兼容IE的写法
}

第二步,调用XHR对象的方法open()来初始化

open(); 有三个参数

第一个是method,请求的方式: "POST,GET..." 这两个比较常用

第二个是请求的URL,可以是绝对路径或者相对路径,当要遵循同域原则

第三个是true和false,true表示异步请求,false是同步请求。默认是true;

xhr.open("GET","example.php",true);
//这里只是初始化请求条件!并未发送请求
//这里发送了一次请求。
//send();可以发送数据,但如果不,建议传入null,以便一些浏览器报错;
xhr.send(null);

第三步,发送完请求然后呢?判断请求失败了还是成功了。

xhr有这样一个属性;

xhr.status;

存储着响应的HTTP状态

如果它的值是200,表示请求成功。

如果它的值为304 表示请求的资源并没有被修改,可以直接使用浏览器中缓存的版本;

xhr.status; 

//因为有的浏览器会错误报告204状态代码
if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304) {
  console.log("请求成功");
  alert(xhr.responseText); // 弹出请求到的数据
} else {
  alert(xhr.status); //请求失败,弹出失败的状态
}

到此为止,以上是可以成功发送同步请求的。

但问题来了,我们是发送异步请求,让JS代码继续执行不必等待响应。

还有一个属性

XHR对象的readyState;五个值

0:未初始化,未调用open();

1:启动,但并未发送请求;

2:发送,已经发送请求;

3:接受,已经接受到部分响应数据;

4:完成所有数据的接受,并可以在客户端使用了。

只要readyState属性的值变成另外一个值,就会触发readystatechange事件。

我们来利用这个事件做操作

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) { //说明可以使用了
    if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304) {
      alert(xhr.responseText);
    } else {
      alert("请求失败了呢");  
    }
  }
}

完整代码

var xhr;
//因为有的浏览器会错误报告204状态代码
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest(); //比较常用的
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP"); //兼容IE的写法
}
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) { //说明可以使用了
    if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304) {
      alert(xhr.responseText);
    } else {
      alert("请求失败了呢");  
    }
  }
}
xhr.open("GET","example.php",true);
xhr.send(null);

 

在做Ajax的实验时,找到一个老哥分享的接口,可以拿来练练手;

在此,也感谢这位老哥分享的文章!

免费开放接口API-https://blog.csdn.net/c__chao/article/details/78573737

原生Ajax的使用——含开放API接口的更多相关文章

  1. Django使用AJAX调用自己写的API接口

    Django使用AJAX调用自己写的API接口 *** 具体代码和数据已上传到github https://github.com/PythonerKK/eleme-api-by-django-rest ...

  2. 开放API接口

    [开放API]——知乎.博客园等开放API接口(更新ing)   Cnodejs.org: https://cnodejs.org/api/ 和风天气: http://docs.heweather.c ...

  3. 开放API接口安全处理!

    目录 概念 加密 MD5 Token 开放api参数 重复提交,恶意调用 日志 验证码 开放API接口安全处理! 参考文献: 公钥,私钥和数字签名这样最好理解 (转载) 概念 存在问题: 数据窃取 数 ...

  4. 开放API接口安全处理

    一.开放API接口定义 顾名思义,开放出来给其他人调用的API接口就是开放API接口.例如,短信接口.邮件接口. 二.开放API的弱点 数据窃取 用户的密码等信息被不轨之人窃取,登录账号发布敏感信息, ...

  5. 开放api接口签名验证

    不要急,源代码分享在最底部,先问大家一个问题,你在写开放的API接口时是如何保证数据的安全性的?先来看看有哪些安全性问题在开放的api接口中,我们通过http Post或者Get方式请求服务器的时候, ...

  6. 【转】开放api接口签名验证

    不要急,源代码分享在最底部,先问大家一个问题,你在写开放的API接口时是如何保证数据的安全性的?先来看看有哪些安全性问题在开放的api接口中,我们通过http Post或者Get方式请求服务器的时候, ...

  7. 新浪网易淘宝等IP地区信息查询开放API接口调用方法

    通过IP地址获取对应的地区信息通常有两种方法:1)自己写程序,解析IP对应的地区信息,需要数据库.2)根据第三方提供的API查询获取地区信息. 第一种方法,参见文本<通过纯真IP数据库获取IP地 ...

  8. 准备开发开放API接口

    准备开发APP开放接口,允许JQUERY直接调用http://blog.csdn.net/wuxiangege/article/details/52238968 SIGN的设计与实现http://bl ...

  9. 远程开户系统开放API接口

    如今随着智能识别技术的成熟和商用,金融领域也开始逐渐试水"远程开户".从OCR身份证识别到人脸识别,到如今市场上即将出现完整的远程开户系统,除了需要成熟的技术做支撑外,还需要对市场 ...

随机推荐

  1. unity3d-23种设计模式全解析

    http://www.jianshu.com/nb/4161593 2016.08.03 09:26 字数 1203 阅读 584评论 0喜欢 14 希望大家能共同学习,交流 谢谢支持zero(QQ: ...

  2. vim随想笔记(1)

    本人是一个vim的狂热粉丝,越是使用vim,越是认为琐碎内容太多,时不时地出现一些自己没有见过的使用方法.命令. 因此准备在博客上用空余时间在阅读<学习vi和vim编辑器>的基础上总结一下 ...

  3. HTTP的GET和POST请求

    1.GET请求: 格式例如以下: request-line headers blank-line request-body 如图是我用wireshark截的一个GET请求的HTTP首部: GET请求发 ...

  4. jenkins对接gitlab和git

    1 需要的插件 jenkins的git插件和jenkins的gitlab插件. 2 对接gitlab 在系统配置中,随便起一个连接的名字,设置url,可以直接用ip地址,端口号默认是80,不需要写明. ...

  5. UVALive 4212 - Candy

    Little Charlie is a nice boy addicted to candies. He is even a subscriber to All Candies Magazine an ...

  6. Linux下的IPC-UNIX Domain Socket【转】

    本文转载自:http://blog.csdn.net/guxch/article/details/7041052 一. 概述 UNIX Domain Socket是在socket架构上发展起来的用于同 ...

  7. 2018.2.24Test总结

    T1(luogu3434) comment:水题,考试时我想的是开一个数组在读入时预处理出该长度什么时候会被拦住,但这样数组开不下,剩下只能模拟. 实际上应该把圆筒变成递减序列,再二分该长度即可. T ...

  8. 7.2 高速缓冲存储器-Cache

    高速缓冲存储器:Cache.Cache的功能是提高CPU数据的输入和输出的速率.CPU的速度与主存的速度之间有巨大的差异.主存的存取时间.存取速度要比CPU的速度要慢了很多倍.为了调和它们之间的巨大速 ...

  9. Django - CBV装饰器实现用户登录验证

    一.使用Django自带的decorator 通常情况,使用 函数定义的view,可以直接使用 login_required 直接装饰 @login_required def index(reques ...

  10. Linex系统 配置php服务器

    此文是可以参考 楼主也不是系统管理员只是迫不得已所以自己才找的  大家可以参考 .... ..... 安装apache 安装mysql 安装PHP 测试服务器 php -v 查询php的版本 就这些了 ...