AJAX技术使用及其原理

最新推荐文章于 2022-04-01 10:35:56 发布

原创最新推荐文章于 2022-04-01 10:35:56 发布

· 245 阅读

0 ·

版权

文章标签：

#ajax #js #java #javascript

Ajax技术使用与原理

文章目录

Ajax技术使用与原理

1、简介

AJAX —— Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 是与服务器交换数据并更新部分⽹⻚的技术，在不重新加载整个⻚⾯的情况下。

2、所包含的技术

使用CSS和XHTML
使用DOM模型来交互和动态显示。
使用XMLHttpRequest 对象
使用JavaScript 来绑定和调用

AJAX 的核心是 XMLHttpRequest 对象

不同的浏览器创建XMLHttpRequest对象的方法是有差异的。
IE浏览器使用ActiveObject，而其他的浏览器使用XMLHttpRequest 的 JavaScript 内建对象

3、工作原理

Ajax的⼯作原理相当于在⽤户和服务器之间加了—个中间层(AJAX引擎)，使⽤户操作与服务器响应异步化。并不是所有的⽤户请求都提交给服务器。

像—些数据验证和数据处理等都交给Ajax引擎⾃⼰来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

传统方式：

在这里插入图片描述

新型方式：

在这里插入图片描述

交互方式

浏览器的普通交互方式：

客户端发送请求，等待服务器响应，只有服务器响应成功，客户端才能继续发送请求，服务器才能接着处理请求；

如果服务器正在处理客户端的请求，客户端再次发送请求时，只能等待服务器端处理响应成功，客户端的请求才能接着被处理，或者只能排队等待！

在这里插入图片描述

浏览器的Ajax交互⽅式

由下图我们就能看出，服务器端能处理多个请求，即使服务器处理完的请求还没有响应到客户端，客户端也能继续发送请求。（这样就很大程度上提升了用户的体验感）

在这里插入图片描述

下⾯是使⽤Ajax可以完成的功能：

在创建Web站点时，在客户端执⾏屏幕更新为⽤户提供了很⼤的灵活性。如：动态更新购物⻋的物品总数，⽆需⽤户单击Update并等待服务器重新发送整个⻚⾯。

提升站点的性能，这是通过减少从服务器下载的数据量⽽实现的。例如，在Amazon的购物⻋⻚⾯，当更新篮⼦中的⼀项物品的数量时，会重新载⼊整个⻚⾯，这必须下载32K的数据。如果使⽤Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之⼀。

消除了每次⽤户输⼊时的⻚⾯刷新。例如，在Ajax中，如果⽤户在分⻚列表上单击Next，则服务器数据只刷新列表⽽不是整个⻚⾯。

直接编辑表格数据，⽽不是要求⽤户导航到新的⻚⾯来编辑数据。对于Ajax，当⽤户单击Edit时，可以将静态表格刷新为内容可编辑的表格。⽤户单击Done之后，就可以发出⼀个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。

4、XMLHttpRequest常用属性和方法

（1）onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的函数

例：

xmlHttp.onreadstatechange = function(){
    // ...
    // 这是可以处理服务器响应的代码
}

（2）readyState 属性

readyState 属性存有服务器响应的状态信息。每当readyState 改变时，onreadystatechange 函数就会被执行

readyState 属性可能的值：

状态	描述
0	请求未初始化（再调用open()之前）
1	请求已提出（调用send()之前）
2	请求已发送（这里通常可以从响应得到内容头部）
3	请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4	请求已完成（可以访问服务器响应并使用它）

我们要向这个 onreadystatechange 函数添加⼀条 If 语句，来测试我们的响应是否已完成(意味着可获得数据)：

xmlHttp.onreadystatechange = function() { 
     if (xmlHttp.readyState == 4) { 
     	//从服务器的response获得数据 
     }
}

（3）responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据。

在我们的代码中，我们将把input⽂本框的值设置为等于 responseText：

xmlHttp.onreadystatechange = function() { 
     if (xmlHttp.readyState == 4) { 
     	document.myForm.value = xmlHttp.responseText; 
     }
}

其他属性

在这里插入图片描述

（4）open() 方法

open() 有三个参数。第⼀个参数定义发送请求所使⽤的⽅法，第⼆个参数规定服务器端脚本的URL，第三个参数规定应当对请求进⾏异步地处理。

xmlHttp.open("GET","test.php",true);

（5）send() 方法

send() ⽅法将请求送往服务器。如果我们假设 HTML ⽂件和 PHP ⽂件位于相同的⽬录，那么代码是这样的

xmlHttp.send(null);

其他方法

在这里插入图片描述

5、传统JavaScirpt 的 ajax操作

步骤：

创建XMLHttpRequest 对象（new XMLHttpRequest() ）
设置请求方式（ xmlHttp.open(…) ）
调用回调函数（ onreadystatechange = function(){ … } ）
发送请求（ send() ）

Demo：使用Ajax 验证用户名

servlet

@WebServlet(urlPatterns = "/ajaxtest")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name = req.getParameter("name");
        // 设置返回内容
        resp.setContentType("text/html;charset=utf-8");
        //1.接收参数
        String username = req.getParameter("username");
        System.out.println(name);
        Writer out = resp.getWriter();
        if ("admin".equals(name)){
            out.write("用户已经被注册！！！");
        } else{
            out.write("用户没有被注册！！！");
        }
    }
}

js:

 document.getElementById("name").onblur = function (){
        // 使用原生javascript
        // 1. 创建xmlHttpRequest对象
        var xmlHttp;
        if (window.XMLHttpRequest) {
            // 非IE
            xmlHttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 2. 设置和服务器端交互的 请求路径，相应参数
        // 2.1 获取input->value
        var value = this.value;
        xmlHttp.open("GET","/ajaxtest?name="+value,true);
        // 3. 注册回调函数
        xmlHttp.onreadystatechange = function (){
            if (xmlHttp.readyState == 4){
                if (xmlHttp.status == 200){
                    console.log(xmlHttp.responseText)
                    document.getElementById("res").innerHTML = xmlHttp.responseText;
                } else{
                    alert("AJAX服务器返回错误！");
                }
            }
        }
        // 4. 发送
        xmlHttp.send();
    }

html:

<body>
    <h1>ajaxTest</h1>
    用户名<input type="text" id="name"> <span id="res"></span>
</body>

没有输入结果用户名前：

在这里插入图片描述

输入用户名失去焦点后触发事件发送ajax请求得到响应

在这里插入图片描述

输入admin

在这里插入图片描述

AJAX技术使用及其原理

Ajax技术使用与原理

文章目录

1、简介

2、 所包含的技术

3、工作原理

交互方式

4、XMLHttpRequest常用属性和方法

（1）onreadystatechange 属性

（2）readyState 属性

（3）responseText 属性

其他属性

（4）open() 方法

（5）send() 方法

其他方法

5、传统JavaScirpt 的 ajax操作

2、所包含的技术