美文网首页
ajax五部曲

ajax五部曲

作者: 杨赛舟 | 来源:发表于2017-10-23 09:01 被阅读0次

    思路:

    1:Javascript监听浏览器网页事件(点击,提交,更改等)
    2:由javascript创建Ajax引擎对象
    3:通过Ajax引擎对象发出请求
    4:Ajax引擎等待并且接受服务器的响应内容
    5:javascript再从 Ajax引擎对象 中获取响应内容,

    并且通过dom改变网页界面显示效果

    (1)创建Ajax引擎对象
    就是XMLHtttpRequest对象,所有现代浏览器均支持XMLHttpRequest对象
    (IE5 和 IE6 使用 ActiveXObject)它同时也是一个Javascript对象.
    Ajax引擎(XMLHttpRequest)
    兼容处理
    var xhr = null;
    if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest;
    }else{
    xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    (2) 配置请求对象的信息
    xhr.open('GET/POST','url地址',['是否异步']);
    注意:如果使用post请求,就一定要设置请求头
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gb2312");
    (3) 发送请求
    xhr.send([post请求参数字符串]);
    发送请求分为两种情况:
    【1】监控用户的事件(onclick,onchange等),通过ajax发送请求
    【2】监控浏览器的事件(onload),通过ajax发送请求.
    (4) 监听Ajax引擎对象的改变(是否正确做出了响应)
    xmlHttpRequest.onreadystatechange = function(){
    if (xmlHttpRequest.readyState== 4 && xmlHttpRequest==200) {
    //xmlHttpRequest.responseText
    }
    }
    【1】 详解onreadystatechange

    onreadystatechange属性是一个方法,
    监控到响应内容的返回,
    根据响应内容使用javascript改变当前页面的部分html代码,从而达到不刷新改变局部html代码.
    当Ajax引擎的状态发生改变时都会执行onreadystatechange属性对应的方法

    其他方法:
    abort:取消当前请求

    getAllResponseHeaders:获取响应的所有http头
    
    getResponseHeader:从响应信息中获取指定的http头
    
    open(方式get/post,url地址,同步异步):
    创建一个新的http请求,打开请求,并指定此请求的方法、URL以及验证信息(用户名/密码)
    
    send():发送请求到http服务器并接收回应
    
    setRequestHeader:单独指定请求的某个http头,header()设置http头协议信息
    

    其他属性:
    onreadystatechange:指定当readyState属性改变时的事件处理句柄。

    readyState:返回当前请求的状态,ajax行进过程中不同状态
    
    responseBody:将回应信息正文以unsigned byte数组形式返回.
    
    responseStream:以Ado Stream对象的形式返回响应信息。
    
    responseText:将响应信息作为字符串返回.只读
    
    responseXML:将响应信息格式化为Xml Document对象并返回,只读
    
    status:返回当前请求的http状态码. 200 ok 304 缓存;
             404 not found; 403 没有权限 501 服务器级别错误
    statusText:返回当前请求的响应行状态文本, ok not found forbidden
    

    【4】 - 详解Ajax引擎的状态属性 readyState(0 1 2 3 4)

    *0.请求未初始化
    *1.服务器连接已建立
    *2.请求已接收
    *3.请求处理中
    *4.请求已完成,并且响应已就绪
    当Ajax引擎的状态属性为readyState为4时,说明服务器的响应已经发送给Ajax请求了.
    但是响应的状态吗为200时:说明响应的内容是正确的,这时才会根据相应内容对当前页面的html处理
    总结:
    var xhr = new XMLHttpRequest;
    xhr.open('GET/POST','url地址',['是否异步']);
    xhr.send([post请求参数字符串]);
    xhr.onreadystatechange = function(){
    if (xmlHttpRequest.readyState== 4 && xmlHttpRequest==200) {
    //xhr.responseText
    }
    }

    相关文章

      网友评论

          本文标题:ajax五部曲

          本文链接:https://www.haomeiwen.com/subject/zjsouxtx.html