- AJAX
- Asynchronous JavaScript And XML 的首字母缩写
- AJAX 并不是一种新的编程语言，而仅仅是一种技术方案，它可以创建更好、更快且交互性更强的 web 应用程序。
- 本质是在HTTP协议的基础上通过异步的方式与服务器进行通信
- 功能：
可以不用跳转新界面, 就可以发送请求。
可以直接和服务器进行交互。
- 同步和异步的概念解释
- 指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步
- 同步：一个做完才能做另外一个
- 异步：把一个任务交给其他人，自己做另外一个，两人一块做
- XMLHttpRequest
- 浏览器内建对象，用于在后台与服务器通信(交换数据) ， 由此我们便可实现对网页的部分更新，而不是刷新整个页面。
- get请求使用步骤
- 1.创建请求对象（找个电话）
new XMLHttpRequest()
new ActiveXObject('Microsoft.XMLHTTP'); 支持IE5.6
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
- 2.设置请求方式、URL地址、同异步（输入电话号码）
// 参数1: 请求方式
// 参数2: 请求的url
// 参数3: 是否是异步
xhr.open('get', '01-ajax-base-server.php', true);
xhr.send();
xhr.onreadystatechange = function () { }
判断readyState
if (xhr.readyState == 4) {
判断状态码status
var status = xhr.status;
if (status >= 200 && status < 300 || status == 304) {
执行第5步
}
}
- readyState
0：请求未初始化（还没有调用open()）
1：请求已经建立，但是还没有发送（还没有调用send()）
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成
4：响应已完成；您可以获取并使用服务器的响应了
- 5.处理返回（响应）数据（你听到对方说话）
在第四步的函数中处理
xhr.responseText 获得字符串形式的响应数据。
xhr.responseXML 获得 XML 形式的响应数据。
- Ajax-get请求参数与缓存
- 如何把数据传送到服务器
直接拼接到url地址后面即可
url?name=sz&age=18
// 拿到本地需要传送的数据
var account = document.getElementById('account').value;
var pwd = document.getElementById('pwd').value;
设置请求的目标url (输入电话号码)
// 参数1: 请求方式
// 参数2: 请求的url
// 参数3: 是否是异步
xhr.open('get', '01-ajax-base-server.php?account=' + account + '&pwd=' + pwd, true);
- 注意:IE浏览器下的get请求缓存问题,如果发送的请求，是同一个URL地址,则浏览器会返回之前响应的缓存
- 原因:一个相同的URL地址，一般只有一个结果， 所以，第二次访问的时候， 如果URL字符串没有变化，IE浏览器则直接使用之前的结果
- 解决方案:生成随机数拼接到URL地址后面
function getRandomStr() {
return Math.random() + (new Date()).getTime();
}
xhr.open('get', '01-ajax-base-server.php?account=' + account + '&pwd=' + pwd + '&random=' + getRandomStr(), true);
- post请求与get请求区别
- 第二步中，将open的请求参数改为post即可
- 第二步中，不能将参数放在URL后面。应该在第三步send方法中传递
xhr.send('name=sz&age=19');
- 注意：在第二步open之后，第三步send之前需要添加：
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//Content-Type防止乱码
/*js 内置的 http 请求对象 XMLHttpRequest*/
/*1.初始化这个内置对象*/
var xhr = new XMLHttpRequest();
/*2.请求报文*/
/*请求行*/
xhr.open('post','01.php');
/*请求头*/
//get 没有必要设置
//post 必须设置 Content-Type: application/x-www-form-urlencoded
xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded');
/*请求主体*/
//get: xhr.send(null);
//post: xhr.send("数据");
xhr.send("name=xzz&age=10");/*发送请求*/
/*3.响应报文*/
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){/*通讯完全完成*/
if(xhr.status == 200){/*响应成功*/
document.querySelector('body').innerHTML = xhr.responseText;//渲染页面
}
}
}
