[JavaScript知识库]ajax技术详解

目录

背景：

ajax简介:

ajax之创建对象

ajax之onreadystatechange?事件

?ajax之发送请求

ajax使用实例 附代码解析

实例效果

小结

背景：

????????在当时的条件下，浏览器想要给服务器发送某个请求时，必须把整个浏览器页面都给刷新一次，这对用户的体验十分不友好，就比如，你正在浏览器看某场球赛的直播，某个你喜欢的队伍进球了，于是你发了一个弹幕：好球，这时页面直接全部刷新了，你需要重新加载直播。。。这是科学的，于是就有了这种异步请求方式。

ajax简介:

????????AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

ajax之创建对象

function createXMLHttpRequest() {   
            if (window.XMLHttpRequest) {
                xmlhttp=new XMLHttpRequest();
            } else {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
        }

?这个函数通过浏览器是否可以获取到XMLHttpRequest这个参数，来判断浏览器类型，并根据类型来创建xmlHttp对象，比如能获取说明不是IE浏览器，如火狐、谷歌浏览器

ajax之onreadystatechange?事件

? ? ? ? 当你通过ajax向服务器发送请求后，你是不是应该判断一下该请求是否被服务器收到并成功响应了？这就是这个事件的作用，在这其中还有两个参数? ? readyState、status

readyState一共有0、1、2、3、4这几种状态

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

status一共有200和404两种状态

????????200: "OK"
????????404: 未找到页面

举个例子

xmlhttp.onreadystatechange=handleStateChaange;

function handleStateChaange() {
            if (xmlhttp.readyState==4){              
                if (xmlhttp.status==200){            
                   //你的代码         成功
                }else{
                   //你的代码         失败
                }
            }
        }

?

?ajax之发送请求

????????ajax发送的请求可以分为两种：get请求以及post请求

GET请求:

 xmlhttp.open("GET","cust.action?op=showAll");  
 xmlhttp.send(null); 

open方法中有两个参数，一个代表你发送请求的类型，还有一个是你指定的url资源，你可以像这样直接在后面传参数，也可以在send（）方法中传参，如果参数多建议在send（）中传参

如：

xmlhttp.send("user="+user+"&pwd="+pwd+"&loginCode="+loginCode);

?

POST请求:

如果你希望你的请求类型是post，你还需要加上这一句代码

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

ajax使用实例 附代码解析

????????需求：我需要完成这样一个功能，在不刷新页面的情况下，通过异步请求的方式，在页面显示所有注册用户的信息，并把信息显示在表中（只展示与ajax有关的代码）

html页面中的内容

 <a href="javascript:showAll()">异步显示所有注册用户</a>
    <table border="1px" width="800px">
        <tr>
            <td>编号</td>
            <td>用户名</td>
            <td>密码</td>
            <td>年龄</td>
            <td>性别</td>
            <td>兴趣</td>
            <td>宣言</td>
        </tr>
        <tbody id="result">

        </tbody>

一个a标签，以及一个只有表头的表，a标签用js代码

?

<script>
        function $(id) {
            return document.getElementById(id)
        }

        //原始的ajax
        var xmlhttp;
        function createXMLHttpRequest() {   
            if (window.XMLHttpRequest) {
                xmlhttp=new XMLHttpRequest();
            } else {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        function showAll() {  //调用的方法
            createXMLHttpRequest();   //创建对象
            xmlhttp.onreadystatechange=handleStateChaange; 
            xmlhttp.open("GET","cust.action?op=showAll");  
            xmlhttp.send(null);                             
        }

        function handleStateChaange() {
            if (xmlhttp.readyState==4){              
                if (xmlhttp.status==200){           
                    var result=eval("("+xmlhttp.responseText+")");
                    var s="";
                    if (result.code==1){
                        for (var i=0;i<result.data.length;i++){
                            var cust=result.data[i];
                            s+="<tr>";
                            s+="<td>"+cust.id+"</td>";
                            s+="<td>"+cust.user+"</td>";
                            s+="<td>"+cust.pwd+"</td>";
                            s+="<td>"+cust.age+"</td>";
                            s+="<td>"+cust.sex+"</td>";
                            s+="<td>"+cust.favours+"</td>";
                            s+="<td>"+cust.comments+"</td>";
                            s+="</tr>";
                        }
                        document.getElementById("result").innerHTML=s;
                    }
                }
            }
        }

       
    </script>

?

实例效果

点击a标签，页面没有整个刷新并显示了这一张表 。

小结

????????这种ajax虽然简单，但写的代码十分的麻烦，令人烦躁，但这是基础，学会并理解这个，对你学习vue也会有所帮助。