ajax的过程

AJAX=Asynchronous JavaScript and XML(异步的JavaScript和XML)
AJAX不是一种新的语言,而是一种使用现有标准的新方法。
AJAX在不重新加载整个页面的情况下,实现与服务器的数据交换刷新局部页面。

详细过程:

  1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象
  2. 创建一个新的HTTP请求,并指定请求方式、URL、是否异步调用
  3. 设置响应HTTP请求状态变化函数
  4. 发送HTTP请求
  5. 获取异步调用返回的函数
  6. 使用javascript和DOM实现局部刷新

1.创建XMLHttpRequest对象

//创建XMLHttpRequest对象
var xhr;
if(window.XMLHttpRequest){
    //for ie7+,firefox,Chrome,Opera,Safari
    xhr=new XMLHttpRequest();
}else{
    //for ie6,ie5
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

2.向服务器发送请求

//向服务器发送请求
//open()规定发送请求的类型,url,是否异步处理
xhr.open("GET","test.txt",true);
xhr.send();

GETPOST,与POST相比,GET传输速度快,效率高,大部分情况下使用GET,在以下几种情况中使用POST

  • 无法使用缓存文件(更新服务器上的文件或数据)
  • 向服务器发送大量数据 (POST没有数据量限制)
  • 发送包含未知字符的用户输入时,POSTGET更稳定,可靠。

3.服务器响应

//如果来自服务器的响应不是XML文件,使用responseText属性
myDiv.innerHTML=xhr.responseText;

//如果来自服务器的响应是XML文件
xmlDoc=xhr.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
var myDiv= document.getElementById("myDiv");
for (i=0;i<x.length;i++){
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
 }
myDiv.innerHTML=txt;

4.readyState

//当readyState改变时,就会触发onreadystatechange事件
//readyState属性存有XMLHttpRequest对象的状态信息
//onreadystatechange事件会触发5次,对应readyStates的5个状态(0~4)
xhr.onreadystatechange==function(){
    if(xhr.readyState == 4 && xhr.status ==200){
        myDiv.innerHTML=xhr.resopnseText;
    }
}

//或者使用Callback函数
function myFun(){
    loadXMLDoc("test.txt",function(){
        if(xhr.readyState==4 && xhr.status ==200){
            myDiv.innerHTML=xhr.resopnseText;
        }
    });
}

XMLHttpRequest对象的三个重要属性:

  1. onreadystatechange 存储函数,当readyState属性改变时就会调用该函数
  2. readyState 存有XMLHttpRequest对象的状态
    0 请求未初始化 对象已创建
    1 服务器连接已建立 open调用
    2 请求已接收 send调用
    3 请求处理中 正在接收数据
    4 请求已完成,响应已就绪 完成
  3. status
    200 ‘ok’
    404 未找到页面
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值