Ajax基础知识总结

最新推荐文章于 2022-06-09 10:59:31 发布

雲胡不喜

最新推荐文章于 2022-06-09 10:59:31 发布

阅读量112

点赞数

本文链接：https://blog.csdn.net/qq_40596594/article/details/88915213

版权

一：AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。*

二：AJAX应用的五个步骤

创建XMLHttpRequest对象

var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
}
else
{
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}

注册回调函数
首先要理解什么是回调函数：回调函数就是另外某件事结束时执行的一个函数。在Ajax中，回调函数就是服务器对一个请求对象作出响应时调用的函数。浏览器会在某个时刻”回调”这个函数。
xmlHttp.onreadystatechange= callback;
function callback(){}

3.向服务器发送请求,建立连接
请求方法 open（method,url,async）：

method：请求的类型（get/post）;
GET 或 POST url：
async：true（异步）或 false（同步）
如果http的请求方式是post，则需要设置请求头信息

4.向服务器发送数据
send(string) 用于post方法；
send（null）用于get方法；

5.执行响应的任务
这里利用onreadystatechange 事件来处理


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script type="text/javascript">
        function loadxmlDoc(){
            var xmlhttp;
            if(window.XMLHttpRequest)
            {
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
               xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function ()
                //onreadystatechange属性：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
             /*  ready属性：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
                            0: 请求未初始化
                            1: 服务器连接已建立
                            2: 请求已接收
                            3: 请求处理中
                            4: 请求已完成，且响应已就绪
                status属性：200: "OK"
                            404: 未找到页面
            */ {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("mydiv").innerHTML = xmlhttp.responseText;
                }
                /*       open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。
                      method：请求的类型；GET 或 POST
                      url：文件在服务器上的位置
                     async：true（异步）或 false（同步）
                send(string)将请求发送到服务器。string：仅用于 POST 请求
            */

            }
            xmlhttp.open("GET", "test1", true);
            xmlhttp.send();
        }
    </script>
</head>

<body>
    <div id="mydiv"><h2>Let AJAX change this text</h2></div>
    <button type="button" "loadxmlDoc()">通过AJAX改变内容</button>
</body>
</html>

雲胡不喜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax基础知识总结

一：AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。*二：AJAX应用的五个步骤创...
复制链接

扫一扫