Ajax

简介: Ajax是无需刷新页面就能够从服务器取得数据的一种方法。1、XMLHttpRequest对象各浏览器(包括ie7+)都支持原生的XHR对象,在这些浏览器中创建XHR对象可以:var xhr=new XMLHttpRequest();ps:个人觉得现在写一个跨浏览器兼容的函数方法没必要,兼容做到ie7+就够了2、XHR的用法①open( )方法接受三个参数:第一个参数是要发送的请求的类型(“get”、“post”等);第二个参数是请求的URL(文件);第三个参数表示是否(true/false)异步发送请求的布尔值。

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);
目录
相关文章
|
1月前
|
JSON 缓存 前端开发
Ajax的使用(最详细!!!)
Ajax的使用(最详细!!!)
|
3月前
|
XML 前端开发 JavaScript
AJAX
AJAX是一种基于Web技术的方法,它通过使用JavaScript和XMLHttpRequest对象,实现在不刷新整个页面的情况下与服务器进行数据交换和更新局部内容的能力。这种异步通信的方式可以提高用户体验,使网站更加动态和交互
27 3
AJAX
|
JSON 前端开发 JavaScript
|
XML JSON 前端开发
Ajax
Ajax(Asynchronous JavaScript and XML,异步的JavaScript和XML)技术可以实现页面的
156 0
|
前端开发 JavaScript 小程序
ajax中使用总结
ajax中使用总结
109 0
ajax中使用总结
|
XML 前端开发 JavaScript
|
XML 前端开发 JavaScript
|
Web App开发 JavaScript 前端开发
AJAX 使用
1. AJAX 1). 简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。 AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
865 0
|
XML JSON JavaScript
第20天,Ajax
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。
913 0
|
XML 前端开发 JavaScript