ajax过程详解

Ajax是Asynchronous JavaScript and XML的缩写，意思是异步JavaScript和XML，能够节省用户操作，时间，提高用户体验，减少数据请求。

例：使用ajax获取某一文本文件的内容

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ajax的原理</title>
<script>
window.onload=function(){
    var oBtn=document.getElementById('btn');

    oBtn.onclick=function(){
        //1、创建对象，打开浏览器
        var xhr=new XMLHttpRequest();

        //2、在地址栏输入地址
        xhr.open('post','1.txt',true);

        //3、提交（发送请求）
        xhr.send();

        //4、等待服务器返回内容
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4) {
                if (xhr.status==200) {
                   alert(xhr.responseText); 
               }else{
                alert("出错了:"+xhr.status);
               }
                
            };
        }

    }
}
</script>
</head>
<body>
    <input type="button" value="按钮" id="btn" />点击这里
    <br/>
    ajax的原理<br/>
    这里是ajax原理的第一个案例
</body>
</html>

1、创建一个ajax对象，这里需要做个异常处理 

var xhr = null;
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');//ie6以下
        }

 

2、在地址栏输入地址，open方法

open（传输方式，地址，是否异步）；

a、传输方式有post和get，get：是通过url地址传输的，传递的类型是字符串，且get有数据量限制，每个浏览器都不容；post：是通过浏览器内部传输的

b、是否异步，异步：非阻塞，前面的代码不会影响后面代码的执行；同步：阻塞，前面的代码会影响后面代码的执行

 

3、发送请求，相当于form的submit

 

4、等待服务器返回内容

onreadystatechange事件

readyState属性：请求状态
0    （初始化）还没有调用open()方法
1    （载入）已调用send()方法，正在发送请求
2    （载入完成）send()方法完成，已收到全部响应内容
3    （解析）正在解析响应内容
4    （完成）响应内容解析完成，可以在客户端调用了
status属性：服务器(请求资源)的状态
返回的内容
responseText：返回以文本形式存放的内容
responseXML：返回XML形式的内容

posted on 2017-04-16 23:27  洛水三千  阅读(2268)  评论(0)  编辑  收藏  举报

导航