本文详细介绍了Ajax的基础知识，包括其异步特性、同步与异步的区别、工作原理和基本使用方法。Ajax允许在不刷新整个页面的情况下与服务器交换数据，实现网页的异步更新。文中还给出了Ajax的JavaScript实现示例，并强调了GET和POST请求的不同场景。最后，文章提供了几个Ajax请求的笔试题目以供练习。
- 知识点
- Ajax介绍
(1)、老版的请求
代web程序最初的目的就是将信息（数据）放到公共服务器上，让所有的网络用户都可以通过浏览器访问。
我们一般都是通过以下方式让浏览器发送服务器请求，获得服务器数据
- 地址栏输入地址
- 特定元素的href 或者src属性
- 表单提交
弊端：这些方案我们很难通过代码的方式进行编程，而且每次请求都会刷新网页。
- 、什么是Ajax
1、AJAX( Asynchronous JavaScript and XML)异步的 JavaScript 和 XML。
2、AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
3、AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
4、AJAX 可以使网页实现异步更新
5、AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
- 、ajax 同步和异步区别？
我们在使用 ajax 一般都会使用异步处理。
异步处理呢就是我们通过事件触发到 ajax，请求服务器，在这个期间无论服务器有没有响应，客户端的其他代码一样可以运行。
同步处理：我们通过实践触发 ajax，请求服务器，在这个期间等待服务器处理请求， 在这个期间客户端不能做任何处理。当 ajax 执行完毕才会继续执行其他代码。
同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕同步需要等待返回结果才能继续，异步不必等待，一般需要监听异步的结果
同步是在一条直线上的队列，异步不在一个队列上 各走各的
jquery 的 async:false,这个属性
默认是true：异步，false：同步。举例：
同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。
异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到忙完才去吃饭。
(4)、AJAX的原理
- Ajax实例
为了帮助您理解 AJAX 的工作原理，我们创建了一个小型的 AJAX 应用程序:
var xmlhttp;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}else{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
- Ajax语法
(1)、XHR创建对象
1、XMLHttpRequest 是 AJAX 的基础。
2、所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
3、XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
(2)、向服务器发送请求
1、如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
| 方法 | 描述 |
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。
|
| send(string) | 将请求发送到服务器。
|
2、GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
（1）、无法使用缓存文件（更新服务器上的文件或数据库）
（2）、向服务器发送大量数据（POST 没有数据量限制）
（3）、发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
(3)、服务器响应
$如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText：获得字符串形式的响应数据。
responseXML：获得 XML 形式的响应数据。
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
- Ajax的onreadystatechange 事件
(1)、什么是onreadystatechange事件
1、当请求被发送到服务器时，我们需要执行一些基于响应的任务。。
2、每当 readyState 改变时，就会触发 onreadystatechange 事件。
3、readyState 属性存有 XMLHttpRequest 的状态信息。
(2)、XMLHttpRequest 对象的属性
| 属性 | 描述 |
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| Xmlhttp.readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
| Xmlhttp.status | 200: "OK" |
五、总结
见Ajax基础-总结
- 作业
- 笔试题：get与post的区别
- 笔试题：ajax的原理
- Ajax请求题
（1）、
实现效果如下：
单击按钮前：
单击按钮后：
接口如下：
接口地址：http://jsonplaceholder.typicode.com/posts
请求方式：get
传递参数：userId （在地址栏中传参）
传递参数实际值是数字：5
返回值类型：JSON
返回值：
[
{
"userId": 5,
"id": 41,
"title": "non est facere",
"body": "molestias id nostrum\nexcepturi molestiae dolore omnis repellendus quaerat saepe\nconsectetur iste quaerat tenetur asperiores accusamus ex ut\nnam quidem est ducimus sunt debitis saepe"
},
{
"userId": 5,
"id": 42,
"title": "commodi ullam sint et excepturi error explicabo praesentium voluptas",
"body": "odio fugit voluptatum ducimus earum autem est incidunt voluptatem\nodit reiciendis aliquam sunt sequi nulla dolorem\nnon facere repellendus voluptates quia\nratione harum vitae ut"
},
{
"userId": 5,
"id": 43,
"title": "eligendi iste nostrum consequuntur adipisci praesentium sit beatae perferendis",
"body": "similique fugit est\nillum et dolorum harum et voluptate eaque quidem\nexercitationem quos nam commodi possimus cum odio nihil nulla\ndolorum exercitationem magnam ex et a et distinctio debitis"
},
{
"userId": 5,
"id": 44,
"title": "optio dolor molestias sit",
"body": "temporibus est consectetur dolore\net libero debitis vel velit laboriosam quia\nipsum quibusdam qui itaque fuga rem aut\nea et iure quam sed maxime ut distinctio quae"
},
{
"userId": 5,
"id": 45,
"title": "ut numquam possimus omnis eius suscipit laudantium iure",
"body": "est natus reiciendis nihil possimus aut provident\nex et dolor\nrepellat pariatur est\nnobis rerum repellendus dolorem autem"
},
{
"userId": 5,
"id": 46,
"title": "aut quo modi neque nostrum ducimus",
"body": "voluptatem quisquam iste\nvoluptatibus natus officiis facilis dolorem\nquis quas ipsam\nvel et voluptatum in aliquid"
},
{
"userId": 5,
"id": 47,
"title": "quibusdam cumque rem aut deserunt",
"body": "voluptatem assumenda ut qui ut cupiditate aut impedit veniam\noccaecati nemo illum voluptatem laudantium\nmolestiae beatae rerum ea iure soluta nostrum\neligendi et voluptate"
},
{
"userId": 5,
"id": 48,
"title": "ut voluptatem illum ea doloribus itaque eos",
"body": "voluptates quo voluptatem facilis iure occaecati\nvel assumenda rerum officia et\nillum perspiciatis ab deleniti\nlaudantium repellat ad ut et autem reprehenderit"
},
{
"userId": 5,
"id": 49,
"title": "laborum non sunt aut ut assumenda perspiciatis voluptas",
"body": "inventore ab sint\nnatus fugit id nulla sequi architecto nihil quaerat\neos tenetur in in eum veritatis non\nquibusdam officiis aspernatur cumque aut commodi aut"
},
{
"userId": 5,
"id": 50,
"title": "repellendus qui recusandae incidunt voluptates tenetur qui omnis exercitationem",
"body": "error suscipit maxime adipisci consequuntur recusandae\nvoluptas eligendi et est et voluptates\nquia distinctio ab amet quaerat molestiae et vitae\nadipisci impedit sequi nesciunt quis consectetur"
}
]
（2）、
实现效果如下：
单击按钮前：
单击按钮后：
接口如下：
接口地址：http://yapi.shangyuninfo.com/mock/117/list666/t
请求方式：post
传递参数：like paly （在请求体中传参）
传递参数实际值是:like = "游泳" paly = "篮球"
返回值类型：JSON
返回值：{"severe":"web08太牛逼","sharp":"大数据15也很牛逼"}
（3）、
接口如下：
接口地址：http://yapi.shangyuninfo.com/mock/117/list666/w
请求方式：get
传递参数：无
返回值类型：JSON
返回值：{"like":"swiming"}
获取到返回值即可，此题不需要渲染！
扫一扫
1100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
