博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ajax
阅读量:6479 次
发布时间:2019-06-23

本文共 1535 字,大约阅读时间需要 5 分钟。

Ajax是无需刷新页面就能够从服务器取得数据的一种方法。

1、XMLHttpRequest对象

各浏览器(包括ie7+)都支持原生的XHR对象,在这些浏览器中创建XHR对象可以:

var xhr=new XMLHttpRequest();

ps:个人觉得现在写一个跨浏览器兼容的函数方法没必要,兼容做到ie7+就够了

2、XHR的用法

①open( )方法
接受三个参数:第一个参数是要发送的请求的类型(“get”、“post”等);第二个参数是请求的URL(文件);第三个参数表示是否(true/false)异步发送请求的布尔值。

var xhr=new XMLHttpRequest();xhr.open("get","example.txt",false);

②send( )方法

要发送特定的请求,必须像下面这样调用send( )方法

var xhr=new XMLHttpRequest();xhr.open("get","example.txt",false);xhr.send(null);

    调用send以后,请求就会被分派到服务器,且由于这次请求是同步的(false),所以js代码会等到服务器响应之后再继续执行。

    在收到响应以后,响应的数据就会自动填入到XHR对象的几个属性中去。

③XHR对象的属性

  • responseText:作为响应主体返回的文本。
  • responseXML:如果响应类型是“text/xml”或“application/xml”,这个属性将包含这响应数据的XML DOM文档。
  • status:响应的http状态。
  • statusText:http状态说明
var xhr=new XMLHttpRequest();xhr.open("get","./example.txt",false);xhr.send(null);if(xhr.status>=200 && xhr.status<300 || xhr.status==304){    alert(xhr.responseText);}else{    alert("Request was unsuccessful:"+xhr.status);}

ps:chrome浏览器不支持本地的异步请求,所以本地测试请换其他浏览器

  • readyState:表示请求/响应过程的当前活动阶段。这个属性可取的值如下:
    0:未初始化。尚未调用open方法。
    1:启动。已经调用open方法,但尚未调用send方法。
    2:发送。已经调用send方法,但尚未接受到响应。
    3:接受。已经接受到部分响应数据。
    4:完成。已经接受到全部响应数据,而且已经可以在客户端使用了。
    只要readyState属性的值由一个值变成另一个值,都会触发一次readystatechange事件;可以利用这个事件来检测每次状态变化后readyState的值
var xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){    if(xhr.readyState == 4){        if(xhr.status>=200 && xhr.status<300 || xhr.status==304){            alert(xhr.responseText);        }else{            alert("Request was unsuccessful:"+xhr.status);        }    }};xhr.open("get","example.txt",true);xhr.send(null);

转载地址:http://cxwuo.baihongyu.com/

你可能感兴趣的文章
从京东技术演进看互联网企业的成长历程
查看>>
MFC ado+mysql+odbc技术分享
查看>>
js中让字符串中特定字符红色显示
查看>>
HttpClient4.5教程-第二章-连接管理
查看>>
redhat Nginx 安装
查看>>
oracle 配置监听
查看>>
上海访微软 详解Azure和S+S
查看>>
跨国巨头猛攻语音识别技术 让电脑听懂人们说话
查看>>
moosefs即将发布新版
查看>>
FOSCommentBundle功能包:运行测试
查看>>
SmartGit 试用过期
查看>>
python 测试驱动开发的简单例子
查看>>
JDBC中驱动加载的过程分析
查看>>
Aes 加密简单例子
查看>>
AE 线编辑
查看>>
软件设计之UML—UML的构成[上]
查看>>
[SPLEB]CodeSmith原理剖析(1)
查看>>
如何使用AdMob中介界面?
查看>>
分享一个shell脚本:通过Jumper机器来创建Jumper和target机器账号
查看>>
UITableViewCell分割线不是左对齐的问题
查看>>