AJAX技术详解：异步更新网页内容-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_49756092/article/details/117297183

Ajax简介

（Asynchronous JavaScript and XML(异步的JavaScript 和 XML))简写：AJAX

1.什么是AJAX ?

Ajax不是某种编程语言

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

传统的网页（不使用AJAX）如果需要更新内容，必须重载整个网页。

有很多使用AJAX的应用程序：新浪微博，Google地图等等

2.同步与异步

同步：就是指一个进程在执行某个请求的时候；

如果这个请求需要一段时间才能返回信息；

那么这个进程将会一直等待下去；

直到收到返回信息才继续执行下去；

       同步：

              请求一 1ms

              请求二 1ms

              请求三 1ms

              一共用3ms

异步：是指进程不需要一直等下去；

而是继续执行下去的操作，不管其他进程的状态。

但有消息返回时系统会通知进程处理，

这样可以提高执行的效率。

       异步：

              请求一 1ms

              请求二 1ms

              请求三 1ms

              一共用1ms

异步实现：

           1.运用HTML与CSS来实现页面，表达信息

           2.运用XMLHttpRequest和web服务器进行数据的异步交换

           3.运用JavaScript操作DOM，实现动态局部刷新

3.AJAX-创建XMLHttpRequest对象

什么是XMLHttpRequest对象？

XMLHttpRequest对象用于在后台与服务器交换数据（具体介绍见w3c）

创建XMLHttpRequest对象

所有现代浏览器（IE7+,Firefox,Chrome,Safari以及Opera）均内建XMLHttpRequest对象。

   创建XMLHttpRequest对象的语法：

         var xhr = new XMLHttpRequest();

   老版本的Internet Explorer(IE5和IE6)使用ActiveXObject对象：

         var xhr = new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括IE5和IE6,请检查浏览器是否支持XMLHttpRequest对象.如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xhr;

if (window.XMLHttpRequest) {

//code for IE7+,Firefox,Chrome,Safari以及Opera

xhr = new XMLHttpRequest();

} else {

//code for IE5和IE6

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

4. AJAX - 向服务器发送请求

向服务器发送请求，我们使用XMLHttpRequest对象的open()和send()方法：

open(method,url,asyns)规定请求的类型，URL 以及是否异步处理请求。

参数说明：

method:请求的类型；GET 或 POST

url:文件在服务器上的位置

async:true(异步)或false(同步)Asynchronous

send(string):将请求发送到服务器

参数说明：string仅用于POST请求

一个简单的GET请求：

xhr.open("GET","/Ajax02/getInfor",true)

xhr.send();

一个简单的POST请求：

xhr.open("POST","/Ajax02/getInfor",true)

xhr.send();

5.AJAX 服务器响应

使用XMLHttpRequest对象的responseText或responseXML属性获取来自服务器的响应

responseText：获得字符串形式的响应数据。

responseXML：获得 XML 形式的响应数据。

6.AJAX onreadystatechange事件

在XMLHttpRequest对象中，readyState属性存有XMLHttpReqest的状态信息，

每当readyState改变时，就会触发oureadystatechange事件。

下面是XMLHttpRequest对象的三个重要属性：

onreadystatechange:存储函数(或函数名),每当readyState属性改变时，就会调用该函数。

readyState:存在XMLHttpRequest的状态。从0到4发生变化。

0:请求未初始化

1:服务器连接已建立

2:请求已接收

3:请求处理中

4:请求已完成，且响应已就绪

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

在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

    当readyState等于4且status为200时，表示响应已就绪：

         if(xhr.readyState == 4 && xhr.status == 200){

            var txt = xhr.responseText;

            console,log(txt);

一个小案例：

网页输出：

//从控制器中获取数据 点击事件

document.getElementById("btnGetData").onclick = function () {

//创建XMLHttpRequest对象

if (window.XMLHttpRequest) {

    //code for IE7+,Firefox,Chrome,Safari以及Opera

    var xhr = new XMLHttpRequest();

   } else {

      //code for IE5和IE6

      var xhr = new ActiveXObject("Microsoft.XMLHTTP");

  }

     xhr.open("get", "/Xml/PersonData");

     xhr.send();

     //onreadystatechange事件：当readyState的值改变时触发

     xhr.onreadystatechange = function () {

        //var str = xhr.responseText;

        //console.log(xhr.readyState);

        //当readyState等于4且status为200时，表示响应已就绪。

       if (xhr.readyState == 4 && xhr.status == 200) {

        //responseText：获得字符串形式的响应数据。

        //responseXML：获得 XML 形式的响应数据。

        console.log(xhr.responseText);

        console.log(xhr.responseXML);

        //JSON.parse(json格式的字符串) ==》js对象

        var person = JSON.parse(xhr.responseText);

        //在控制台中数据person的数据

        console.log(person);



        document.getElementById("txtName").value = person.name;

        document.getElementById("cboSex").value = person.sex;

        document.getElementById("txtAddress").value = person.address;

        }

     }

}

该点击事件可以实现从控制器中获取数据到页面，效果如下：

点击这个按钮会从下面的控制器获取数据：

获取到页面的三个表单中：

获取数据就是这么点内容，下面是数据提交，我们换一个小案例：

用post方法来提交，在上一个笔记中，有详细的get(),post()方法的使用，我们现在通过post()的其他方法来提交数据：

首先从控制器中获取数据：

function btnGetData() {

            if (window.XMLHttpRequest) {

                var xhr = new XMLHttpRequest();

            } else {

                var xhr = new ActiveXObject("Microsoft.XMLHTTP");

            }

            xhr.open("post", "/Ajax/strData");

            xhr.send();

            xhr.onreadystatechange = function () {

                if(xhr.readyState==4&&xhr.status==200){

                    console.log(xhr.responseText);

                    var txt = JSON.parse(xhr.responseText);

                    console.log(txt);

                    document.getElementById("txtName").value = txt.name;

                    document.getElementById("cboSex").value = txt.sex;

                    document.getElementById("txtDax").value = txt.dax;

                    document.getElementById("txtAddress").value = txt.address;

                    

                }

            }

        }

获取数据具体说明：

控制器中接收表单提交数据的四种方式：

通过形参接收数据
通过FormCollection来接收数据
通过 Request.Form["name的属性值"]获取表单数据
EntityClass实体类接收数据

在这里就只用第一种通过形参接收数据：

两个点击事件：

function postData1() {

            var txtName = document.getElementById("txtName").value;

            var txtSex = document.getElementById("cboSex").value;

            var txtDax = document.getElementById("txtDax").value;

            var txtAddress = document.getElementById("txtAddress").value;

           

            var strDava = "name=" + txtName + "&sex=" + txtSex + "&dax=" + txtDax + "&address=" + txtAddress;



            if (window.XMLHttpRequest) {

                var xhr = new XMLHttpRequest();

            } else {

                var xhr = new ActiveXObject("Microsoft.XMLHTTP");

            }

            xhr.open("post", "/Ajax/receiveData", true);

            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            xhr.send(strDava);

            xhr.onreadystatechange = function () {

                if (xhr.readyState == 4 && xhr.status == 200) {

                    console.log(xhr.responseText);

                }

            }

        }

 function postData2() {

            var txtName = document.getElementById("txtName").value;

            var txtSex = document.getElementById("cboSex").value;

            var txtDax = document.getElementById("txtDax").value;

            var txtAddress = document.getElementById("txtAddress").value;

            



            //FormData()

            var formData = new FormData();

            formData.append("name", txtName);

            formData.append("sex", txtSex);

            formData.append("dax", txtDax);

            formData.append("address", txtAddress);

            



            if (window.XMLHttpRequest) {

                var xhr = new XMLHttpRequest();

            } else {

                var xhr = new ActiveXObject("Microsoft.XMLHTTP");

            }

            xhr.open("post", "/Ajax/receiveData", true);

            xhr.send(formData);

            xhr.onreadystatechange = function () {

                if (xhr.readyState == 4 && xhr.status == 200) {

                    console.log(xhr.responseText);

                }

            }

        }

第一个点击事件的内容：