JavaScript之Ajax（十一）

最新推荐文章于 2024-07-25 09:24:40 发布

已进厂(。•́︿•̀。)

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量406

点赞数

分类专栏： JavaScript 文章标签： javascript ajax servlet

本文链接：https://blog.csdn.net/twjtwjtwjm/article/details/131026454

版权

JavaScript 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

JavaScript之Ajax

Ajax ==> Asynchronous JavaScript And XML (异步的 JavaScript 和 XML)。

Ajax是一种页面(局部)刷新技术，它是异步执行的，也就是说，要通过回调函数获得响应。

1、XMLHttpRequest 对象

用于在后台与服务器交换数据，不同的浏览器创建该对象的方式有差异，主流浏览器均内建该对象，创建方式如下：
var xhr;
if (window.XMLHttpRequest){
//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xhr=new XMLHttpRequest();
} else{
 // IE6, IE5 浏览器执行代码
 xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

2、XMLHttpRequest 请求与响应

2.1、请求

/*
规定请求的类型、URL 以及是否异步处理请求。
*/
xhr.open("GET","ajax_info.txt",true);
// 如果请求的类型为 post，则要使用 setRequestHeader() 来添加 HTTP头。
xhr.open("POST","AjaxServlet",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
/*
发送请求到服务器端，如不需发送数据，则使用null。
*/
xhr.send(null);
xhr.send("userName="+userName);

2.2、响应

xhr.responseText //获得字符串形式的响应数据
xhr.responseXML //获得 XML 形式的响应数据
xhr.status //响应的状态码：200,302,404,500 
xhr.statusTextHTTP //状态的说明
xhr.readyState //检测响应状态，值：0-4
/*
0：请求未初始化  
1：服务器连接已建立   
2：请求已接收
3：请求处理中      
4：请求已完成，且响应已就绪
当响应状态为4时，才使用responseText或responseXML从 xhr 对象中获取服务端响应给客户端的数据
*/
xhr.onreadystatechange //响应状态改变事件，每当 readyState 属性改变时，就会调用该函数。

3、七大步骤

1、实例化异步请求对象

//定义一个全局的XMLHttpRequest对象
let xhr;
if(window.XMLHttpRequest){
 //针对IE7以上，FireFox,Chrome,Opera等。。。
 xhr=new XMLHttpRequest();
}else {
 //针对IE5,IE6
 xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

2、给异步请求对象注册回调函数

xhr.onreadystatechange=mycallback; //也可直接绑定匿名函数

3、设置请求信息

//A：Get方式代码
xhr.open("GET","AjaxServlet?text="+text,true);

//B：Post方式代码：需要设置Http的请求头
xhr.open("POST","AjaxServlet",true);
//设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

4、发送请求到服务器端

//A：已经在请求url的后方已经附加了数据，或没有数据要发送
xhr.send(null);

//B：单独发送数据
xhr.send("userName="+userName);

5、在回调函数中针对不同的响应状态进行处理

function mycallback(){
// 判断异步对象的状态
if(xhr.readyState == 4) {
 // 判断交互是否成功
 if(xhr.status == 200) {
   // 获取服务器响应的数据
   let res = xhr.responseText; // 或xmlHttp.responseXML;
   // 将数据更新到HTML页面中，实现页面的局部刷新
   res = JSON.parse(res);
   document.getElementById("text").innerHTML=msg;
 }
}
}

注意： 这些例子只是演示一下，并不一定是这样的，Ajax 的应用场景是灵活多变的，可以读取xml文件，json文件，发送 head 请求，接收服务器端返回的数据，接收数据库返回的数据，用户信息验证等等…

4、页面局部刷新实例

<body>
    <button onclick="validateUser()">点击修改输入框的值</button>
    <input type="text" value="666" id="text" />
    <script>
        //定义一个全局的XMLHttpRequest对象
        let xhr;
        //点击按钮修改输入框内容的函数
        function validateUser() {
            if (window.XMLHttpRequest) { // 1、创建xhr对象实例
                //针对IE7以上，FireFox,Chrome,Opera等。。。
                xmlHttp = new XMLHttpRequest();
            } else {
                //针对IE5,IE6
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.onreadystatechange = mycallback; // 2、注册回调函数

            xhr.open("GET", "AjaxServlet", true); // 3、设置请求信息
            xhr.send(null); // 4、发送请求到服务器端
        }
        //5、执行回调函数，根据不同的响应状态进行处理
        function mycallback() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                let msg = xhr.responseText; //得到响应数据
                document.getElementById("text").value = msg; //更新刷新页面数据
            }
        }
    </script>
</body>

5、读取xml文件

<body>
<button onclick="loadXMLDoc()" >获取我的CD</button>
<table id="demo"></table>

<script>
    function loadXMLDoc() {
        let xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                myFunction(this);
            }
        };
        xhttp.open("GET", "cd.xml", true);
        xhttp.send();
    }
    function myFunction(xml) {
        let i;
        let xmlDoc = xml.responseXML;
        let table="<tr><th>Artist</th><th>Title</th></tr>";
        let x = xmlDoc.getElementsByTagName("CD");
        for (i = 0; i <x.length; i++) {
            table += "<tr><td>" +
                x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
                "</td><td>" +
                x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
                "</td></tr>";
        }
        document.getElementById("demo").innerHTML = table;
    }
</script>
</body>

上一篇文章	下一篇文章
JavaScript之事件（十）	JavaScript之JSON（十二）

已进厂(。•́︿•̀。)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之Ajax（十一）

Ajax ==> Asynchronous JavaScript And XML (异步的 JavaScript 和 XML)。Ajax是一种页面(局部)刷新技术，它是异步执行的，也就是说，要通过回调函数获得响应。
复制链接

扫一扫

专栏目录