Ajax学习笔记

Ajax(Asynchronous Javascript And XML)
异步访问服务器的网页技术,无需刷新网页,即可得到服务端消息,对客户端新闻经行判断和识别;AJax只是连接服务器与客户端的三个接口,将客户端的消息传送到服务器,通过劳务器端的文件对Ajax提供的新闻举办有关的操作,消息的来源于是从页面上通过js获取

ajax首假诺透过XMLHttpRequest对象完结异步操作的

1.创建XMLHttpRequest对象

var request;

if(window.XMLHttpRequest){

request = new XMLHttpRequest();

}else{

request = new ActiveObject(“Microsoft.XMLHttp”);

}

因为IE7以下并不扶助XMLHttpRequest对象,所以选取那种艺术创造,一般能够忽略,直接利用var
request = new XMLHttpRequest();创设

 

2.http请求

http协议是无状态的说道浏览器和服务器之间的请求分为如下几步:(1)建立TCP连接   
(2)Web浏览器向Web服务器发送给请求命令(3)Web浏览器发送请求头消息(4)Web服务器应答

(5)Web服务器发送响应头信息(6)Web服务器发送数据(7)Web服务器关闭TCP连接

 

Ajax,3.出殡和埋葬请求

request.open(method,url,async)

method 请求格局 post get

url  请求地址

async 默认为true即异步,false为同步

request.send(String)

String 可不填,为发送必要发送的数量

 

4.响应

responseText  字符串形式的响应数据

responseXML:XML情势的响应数据status和statusText() :
以数字或文本的格局重临HTTP状态码

getAllRequestHeader():获取具有的响应头音讯

getResponseHeader() :获取一定字段的响应头消息

5.readyState属性

0:请求未初叶化,open未调用

1:服务器连接已经创制

2:请求已经吸收接纳

3:请求处理中

4:请求已经完成

request.onreadystatechange
=function(){

//监听事件 是否返响应

}

 

6.切实代码

原生js实现

 

<script>
    var request = new XMLHttpRequest();
    request.open("GET","");//空格为提交到的后台处理文件,如php 惊悚片等
    //request.setRequestHeader("","");//当open的method是post方式时,需要调用此方法,设置相应的参数
    request.send();//发送
    request.onreadystatechange =function(){//监听事件 是否返响应
        if(request.readyState===4){
            if(request.status==200){
                var data = JSON.parse(request.responseText);
                if(data.success){
                    //操作成功执行的操作
                }else{
                    alert("参数错误");
                }
            }
        }
    }
    </script>

jquery实现

<script>
    $(document).ready(function(){
        $("#search").click(function(){
            $.ajax({
                type:"post",
                url:"",//服务器地址的后台文件地址
                dataType:"json",
                data:"",
                success:function(data){

                },
                error:function(jqXHR){
                    alert(jqXHR.status);
                }
            })
        })
    })
</script>

 

相关文章