初涉JavaScript原生Ajax

2021-12-18 06:56:03

用惯了jQuery的$.ajax()，的确写个回调函数又方便又快。

但是不会用原生的JS AJAX可不行啊，其实也没有想象的复杂，初涉原生的AJAX还是先拿解析JSON数据来练练手。

新建一个json.txt

{
"info": [
{"name":"zhangsan","age":"26"},
{"name":"lisi","age":"27"},
{"name":"wangwu","age":"22"},
{"name":"xiaoliu","age":"23"}
]
}

HTML代码

<button type="button" onclick="loadAjax()">请求数据</button>
<div id="myAjax"></div>

js代码

function loadAjax()
{
    var xmlhttp;
    if(window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        //兼容IE 6
        xmlhttp= new ActiveXobject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange=function()
    {
        
            if(xmlhttp.readyState==4&& xmlhttp.status==200)

            {
                var result=xmlhttp.responseText; 
                var json=eval("("+result+")");//把字符串转换成JSON格式

                
                for(var i=0;i<json.info.length;i++)
                {
                document.getElementById("myAjax").innerHTML+="name:"+json.info[i].name+"<br>age:"+json.info[i].age+"<br>";
                }
            }
        }

    xmlhttp.open("GET","json.txt",true);
    xmlhttp.send();
}

xmlhttp.readyState==4 这个指的是xmlhttp的交互状态.为4就是交互完成.
xmlhttp.status==200 这个是xmlhttp与后台交互时返回的一个状态码。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

关于HTTP状态码

200: "OK"

404: 未找到页面

GET 还是 POST???

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

Async = true

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数

Async = false

不推荐使用 async=false，但是对于一些小型的请求，也是可以的。

请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

初涉JavaScript原生Ajax

码农公寓

相关文章