ajax原理

「爱情、让人受尽委屈。」 2022-05-26 04:59 190阅读 0赞

1.什么是ajax  
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）,  
2.ajax原理  
![ajax原理][ajax]  
每个新的浏览器都有内置的ajax引擎  
第一步：使用js获取浏览器内置的ajax引擎（XMLHttpRequest对象）  
第二步：通过ajax引擎确定请求路径，参数，方式，并把回调函数告诉ajax引擎  
第三步：通知ajax发送请求（ajax引擎会在不刷新浏览器地址栏的情况下，发送请求）  
第四步：服务器获取参数  
第五步：服务器处理请求参数（增删改查）  
第六步：服务器响应数据给浏览器  
ajax引擎获得服务器响应的数据，通过执行js的回调函数，将数据传递给浏览器页面  
第七步：通过设置给ajax引擎的回调函数获得服务器响应数据  
第八步：使用js在指定的位置，显示响应数据，从而局部修改页面的数据，达到局部刷新的目的  
3.javascript ajax  
发送get请求

发送post请求 注意post请求比get请求多一个请求头

4.XMLHttpRequest浏览器兼容问题，这是因为老版本的浏览器  
function sendPost()\{  
//1 获得ajax引擎  
var xmlhttp;  
if (window.XMLHttpRequest)\{//谷歌和火狐  
xmlhttp=new XMLHttpRequest();  
\} else if (window.ActiveXObject) \{//IE  
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
\}  
\}  
在w3cschool文档中有写  
![ajax原理][ajax 1]  
![ajax原理][ajax 2]  
![ajax原理][ajax 3]  
![ajax原理][ajax 4]

5.jquery ajax

//发送get请求
            function sendGet(){
            // $.get() 提供工具方法，用于发送ajax，请求方式get
            // * 参数1：请求路径
            // * 参数2：请求参数
            // * 参数3：回调函数，需要设置一个变量接收数据
            $.get(url,params , function(data){
                alert(data);
            });
        }
                //发送post请求
        function sendPost(){
            $.post(url,params , function(data){
                alert(data);
            });
        }

[ajax]: /images/20220526/1c315affb4f14d1c835cf2d5b7d9e8e1.png
[ajax 1]: /images/20220526/d3c0c562428041788e453de05dc824dc.png
[ajax 2]: /images/20220526/d9792d0ec0334d05813effee3ab03954.png
[ajax 3]: /images/20220526/39a11032dad2415580b44664c4bd9914.png
[ajax 4]: /images/20220526/d284a4c678b448268fd39b272ffaa396.png