ajax原理是个啥

最新推荐文章于 2024-03-19 08:30:00 发布

原创最新推荐文章于 2024-03-19 08:30:00 发布 · 696 阅读

2 ·

CC 4.0 BY-SA版权

其他专栏收录该内容

36 篇文章

订阅专栏

1、ajax干嘛的，用在何处

我们所访问的页面都是从对应的服务器中获取来的，但是有的时候页面的内容很多，不可能每一次都将所有的内容都重新加载，这样效率就太低了！比如我们登录的网上的一个窗体的时候，改变的只是一个登录框，根据输入的内容，服务器给你相应的页面，而当前浏览器的页面没有任何的变化，只是当前页面中对应的部分数据进行了变化。这项技术就是ajax！它向服务器发送异步请求，从服务器获得数据！

如果听着上面的复述很抽象，那么就看下下面的两个图吧

传统方式浏览器与服务器交互，每次都是新的页面
在这里插入图片描述

ajax方式，可以不更新页面，直接返回数据
在这里插入图片描述

通过上边的距离，总结一句话：传统方式是服务器返回给浏览器一个新的界面，ajax方式返回的是数据

2、ajax原理

如果说其原理，有一个关键的因素就是XmlHttpRequest对象，ajax通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据。然后用js来操作dom来更新页面。接下来主要分析XmlhttpRequest对象！

（1）XmlhttpRequest属性

readyState:

HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。

状态	名称
0	Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1	Open open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2	Sent Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3	Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
4	Loaded HTTP 响应已经完全接收。

status

由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 “Not Found” 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常

responseText

请求体：如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。如果 readyState 为 4，这个属性保存了完整的响应体。

onreadyStateChange

onreadyStateChange事件是在readyState属性发生改变时触发的，类似于回调函数（在特定的事件或条件发生时由另外的一方调用）！

（2）XmlhttpRequest方法

open()

初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
语法：open(method, url, async, username, password)（其中 username, password是可选的 async是布尔值，如果是false代表同步，如果是true那就是异步）

基本的属性和方法介绍完了，就不单独介绍方法了，直接上核心代码

//创建XMLHttpRequest对象的方法：
function createXhr() {
var xhr; 
//判断浏览器是否支持xmlhttpRequest
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;    
}


function btn_click() {
        //1、创建/获取xhr
        var xhr = createXhr();
        //2创建请求   ，
        xhr.open("get", "http://127.0.0.1:8089/06-ajax-exercise.php", 	true);

        //3、设置回调函数：onreadystatechange
        xhr.onreadystatechange = function () {
        
            if (xhr.readyState == 4 && xhr.status == 200) {
                var resText = xhr.responseText;   //这个就是php中具体的值
                $("show").innerHTML = resText;
            }
        }
        //发送请求
        xhr.send(null);
    }

接下来是服务器的php代码：