初涉JavaScript原生Ajax

用惯了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 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。