JavaScript 之 ajax

杀马特。学长 韩版系。学妹 提交于 2020-02-26 06:24:20

1. AJAX 的概念

AJAX,即 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)

    • 同步:前面的代码不执行完毕,后面的代码无法执行
    • 异步:前面的代码不执行完毕,后面的代码也可正常执行
  • 作用:在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页,实现异步无刷新
  • 运用场景:表单验证,搜索框输入,论坛,博客等

2. XMLHttpRequest 对象

XMLHttpRequest 用于在后台与服务器交换数据

  • 创建XMLHttpRequest 对象
var xmlhttp;
if(window.XMLHttpRequest){
    //ie7以上、谷歌、火狐支持
    xmlhttp = new XMLHttpRequest();
}else{
    //老版本的ie5、6使用ActiveX
    xmlhttp = new ActiveXObject();
}    
  • 向服务器发送请求
    •   open(请求类型get/post,发送地址,同步true/异步false)
    •   send(string仅用于post请求)  
xmlhttp.open("get","01.txt",true); xmlhttp.send();
    •   当选择同步时,规定在响应处于 onreadystatechange(存储函数,当 readyState 属性改变时调用)事件中的就绪状态时执行的函数
      •   readyState 存有XMLHTTPRequest的状态
        • 0: 请求未初始化
        • 1: 服务器连接已建立
        • 2: 请求已接收
        • 3: 请求处理中
        • 4: 请求已完成,且响应已就绪
      •   status 存储
        • 200: "OK"

        • 404: 未找到页面

xmlhttp.onreadystatechange=function(){  //表示响应已就绪
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200){    document.getElementById("box").innerHTML = xmlhttp.responseText;
   }
}
    •   当选择异步时(不推荐,但可用于小型请求),无需编写 onreadystatechange 函数,把代码放到 send() 语句后面即可

注:JavaScript 会等到服务器响应就绪才继续执行。若服务器繁忙或缓慢,应用程序会挂起或停止。

  • get 方式请求数据
<input type="button" id="btn" value="获取数据">
<div id="box"></div>
<script>
    window.onload = function(){
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{           xmlhttp = new ActiveXObject();
            }
            xmlhttp.open("get","01.txt",true);
            xmlhttp.send();
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    document.getElementById("box").innerHTML = xmlhttp.responseText;
                }
            }
        }
    }</script>

注:get 方式发送的请求会有缓存现象,为避免这种情况,向url添加一个唯一的ID,如下:

//方法一xmlhttp.open("get","01.txt?t=" + Math.random(),true);//方法二xmlhttp.open("get","01.txt?t=" + new Date().getTime(),true);
  • post 方式请求数据
<input type="button" id="btn" value="获取数据">
<div id="box"></div>
<script>
    window.onload = function(){
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                xmlhttp = new ActiveXObject();
            }
            xmlhttp.open("post","02.php",true);
            xmlhttp.send();
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                document.getElementById("box").innerHTML = xmlhttp.responseText;
                }
            }
        }
    }</script>

注:如需像 HTML 表单那样 POST 数据,用 setRequestHeader(头名称,头的值) 添加 HTTP 头。如下:

xmlhttp.open("post","02.php",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send();

3. 服务器响应格式

  • responseText 获得字符串形式的响应数据,返回字符串形式的响应
document.getElementById("box").innerHTML = xmlhttp.responseText;
  • responseXML 获得 XML 形式的响应数据
<input type="button" id="btn" value="获取数据">
<div id="box"></div>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                xmlhttp = new ActiveXObject();
            }
            xmlhttp.open("get","03.xml?t=" + Math.random(),true);
            xmlhttp.send();
            xmlhttp.onreadystatechange = function () {
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    var obj = xmlhttp.responseXML;
                    var arrs = obj.getElementsByTagName("title");
                    var str = "";
                    for(var i = 0;i < titles.length;i++){
                        str += arrs[i].innerHTML;
                        document.getElementById("box").innerHTML = str;
                    }
                }
            }
        }
    }</script>
  • JSON 格式
<input type="button" id="btn" value="获取数据">
<ul id="list"></ul>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                xmlhttp = new ActiveXObject();
            }
            xmlhttp.open("get","04.json?t=" + Math.random(),true);
            xmlhttp.send();
            xmlhttp.onreadystatechange = function () {
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    var res = JSON.parse(xmlhttp.responseText);
                    var arr = res.students;
                    for(var i = 0;i < arr.length;i++){
                        var li = document.createElement("li");
                        li.innerHTML = arr[i].name;
                        document.getElementById("list").appendChild(li);
                    }
                }
            }
        }
    }
</script>

4. Callback 函数

callback 函数是一种以参数形式传递给另一个函数的函数。

  • 当存在多个 AJAX 任务时,则为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
function myFunction(){
    loadXMLDoc("ajax_info.txt",function(){
     if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        document.getElementById("box").innerHTML = xmlhttp.responseText;
      }
   });
}

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!