认识AJAX

最新推荐文章于 2022-06-15 21:51:01 发布

原创最新推荐文章于 2022-06-15 21:51:01 发布 · 368 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #xml #xmlhttprequest #异步

前端经典总结专栏收录该内容

7 篇文章

订阅专栏

本文介绍了AJAX的工作原理及其在网页异步更新中的应用。详细对比了GET和POST两种请求方式的特点，包括安全性、数据大小限制及缓存处理等方面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. AJAX（JavaScript Object Notation）

Asynchronous Javascript And XML (异步JavaScript和XML)
通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2. AJAX的步骤：

创建Ajax对象new XMLHttpRequest()
填写传输地址和传输内容 ajax.open("post"||"get",URL,是否异步)
发送请求 ajax.send();
等待服务器相应 ajax.onload = fn();
服务器响应后执行后续动作 ajax.responseText

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
<script>
    window.onload = function () {
// 1. 创建一个XMLHttpRequest对象 (需要考虑兼容性)
            var xhr = null;
            if (window.XMLHttpRequest){ //主流浏览器 (包括IE7、以后的版本)
                xhr = new XMLHttpRequest();
            }else { //IE6、 IE5
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }
            console.log("状态A"+xhr.readyState);
//  2.设置请求方式以及请求地址 、 是否为异步请求
            //1>使用 get 请求
           var url = './data.json';
           xhr.open('get',url,true); //true 异步请求方式  false 同步
           console.log("状态B"+xhr.readyState);
            //2>.使用 post 请求
            // var url = "02_Ajax.php";
            // xhr.open('post',url,true); //true 异步请求方式  false 同步
            //如果post请求方式,必须要添加请求头 (必须要写在连接建立的状态以后)
            // xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

            // console.log("状态B"+xhr.readyState);
//  3.发送请求
            xhr.send();
            console.log("状态C"+xhr.readyState);
            // var params = "username="+username+"&password="+password;
            // xhr.send(params); //发送请求
            // console.log("状态C"+xhr.readyState);
//  4.回调函数
            xhr.onreadystatechange = function () {
                console.log("状态D"+xhr.readyState);
                // 1.请求有响应    2.响应是正确的,返回的数据是来自请求的URL
                if (xhr.readyState == 4 && xhr.status == 200) {
                        console.log(xhr.responseText);
                        // var div = document.getElementById('div');
                        // div.innerHTML = xhr.responseText;
                }
            }
    }
</script>
</html>

3.get

通过url发送请求，会暴露用户信息
因为是用过url发送的，IE的url会将中文转码，所以在IE下中文需要使用encodeURI转码
使用get传输数据会产生缓存，解决方法是在数据后面加随机数或者时间戳
不同浏览器的url长度不同。

例子：

var ajax = new XMLHttpRequest();
ajax.open("get","../php/get.php?user=" +userName.value ,true );
ajax.send();
ajax.onload = function () {
span.innerHTML = ajax.responseText;
}

4.post ,post与get的区别

通过send直接发送到服务器，理论上来说体积是无限大的（一般后端会做限制）
因为是直接发送给服务器，所以不会被浏览器缓存，也不会暴露用户的信息，相对get来说安全
因为不通过浏览器发送，所以不用转码
必须在send之前设置一个请求头(这个请求头的内容是固定的)
```
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
```
字段的拼接要放进send中,open的第二个参数直接为请地址不用拼接字段了

例子：

var ajax = new  XMLHttpRequest();
ajax.open("post","../php/post.php",true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("user="+this.value);
ajax.onload = function () {
    span.innerHTML = ajax.responseText;
    console.log(ajax.response);
}

5. eval

eval可以计算某个字符串，并执行javascript代码。
通过eval可以将一个长得像对象的字符串转成对象。但是会注入病毒，所以尽量少用或者不用。

var json1 = "{'name':'难'}";
console.log(eval('('+ json1+')'))