前端开发 | ajax基础了解
目录
AJAX介绍
AJAX (Asynchronous JavaScript and XML)即异步的 JavaScript 和 XML。
AJAX 不是新的编程语言，而是一种在无需重新加载整个网页的情况下，通过在后台与服务器进行少量数据交换使网页实现异步更新的技术。而传统的网页不使用 AJAX的话,如果需要更新内容，必需重载整个网页面。AJAX是基于现有的Internet标准。
Google 支持
在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。
Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。
AJAX 基础
XMLHttpRequest是 AJAX 的基础。
使用Ajax发送请求步骤：
- 1、创建XMLHttpRequest对象
- 2、向服务器发送请求
- 3、执行发送动作
- 4、指定回调函数
XMLHttpRequest 对象
XMLHttpRequest 对象用于和服务器交换数据。所有现代浏览器均支持 XMLHttpRequest 对象（IE5和 IE6使用 ActiveXObject）XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建 XMLHttpRequest 对象
所有浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
注意:Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable=new ActiveXObject("Microsoft.XMLHTTP");
向服务器发送请求
如需将请求发送到服务器，通过使用 XMLHttpRequest 对象的open()和send()方法：发送请求语法如下:
xmlhttp.open(method,url,async);
xmlhttp.send(string);
规定请求的类型、URL 以及是否异步处理请求。
参数解析:
- open() – 发送准备
- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置
- async：参数为true（异步）或 false（同步）
- send() – 将请求发送到服务器。
- string：仅用于 POST 请求
请求方式
请求方式有GET和POST,与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
//GET请求:
xhr.open('GET','./check.php?username='+uname+'&password='+pw,true);
xmlhttp.send();
POST请求
使用POST 请求的一般为:
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
如果需要像 HTML 表单那样 POST 数据，使用setRequestHeader()来添加 HTTP 头。然后在 send()方法中规定要发送的数据：
向请求添加 HTTP 头语法格式:
setRequestHeader(header,value)
参数解析:
- header: 请求头的名称
- value: 请求头的值
实例:
//POST请求:
xhr.open('POST','./check.php?username='+uname+'&password='+pw,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("username='+uname+'&password='+pw");
异步 True 或 False
XMLHttpRequest 对象如果要用于 AJAX 的话，其open()方法的 async参数必须设置为 true：
xhr.open('GET','./check.php?username='+uname+'&password='+pw,true);
xmlhttp.send();
当使用 async=true 时，规定在响应处于 onreadystatechange 事件中的就绪状态时执行的事件函数：
当async=false 时，无需写onreadystatechange 函数:
服务器响应
要获得来自服务器的响应，通过使用 XMLHttpRequest 对象的responseText或 responseXML属性:
- responseText 获得字符串形式的响应数据。
- responseXML 获得 XML 形式的响应数据。
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发onreadystatechange 事件。readyState 属性存有XMLHttpRequest的状态信息。
XMLHttpRequest 对象的三个重要的属性如下表：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从0 到 4发生变化。0: 请求未初始化； 1: 服务器连接已建立； 2: 请求已接收； 3: 请求处理中； 4: 请求已完成，且响应已就绪 |
| status |
200: “OK” ； 404: 未找到页面 |
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState等于 4且状态为200 时，表示响应已就绪：
使用回调函数
回调函数是一种以参数形式传递给另一个函数的函数。
如果网站上存在多个 AJAX 任务，那么应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
完整实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识Ajax开发</title>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById('btn');
btn.onclick = function(){
var uname = document.getElementById('username').value;
var pw = document.getElementById('password').value;
// 1、创建XMLHttpRequest对象
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();//标准
}else{
xhr = new ActiveXObject("Microsoft");//IE5,IE6
}
// readyState=0表示xhr对象创建完成
console.log(xhr.readyState + '----------1-----------');
// 2、准备发送
var param = 'username='+uname+'&password='+pw;
xhr.open('post','04post.php',true);
// 3、执行发送动作
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(param);//post请求参数在这里传递，并且不需要转码
// 4、指定回调函数
// readyState=1表示已经发送了请求
console.log(xhr.readyState + '----------2-----------');
// 该函数调用的条件就是readyState状态发生变化（不包括从0变为1）
xhr.onreadystatechange = function(){
console.log(xhr.readyState + '----------3-----------');
// 4表示服务器返回的数据已经可以使用了，但是这个数据不一定是正常的
if(xhr.readyState == 4){
// 200表示服务器返回的数据是正常的，不是200的话表示数据是错误的
if(xhr.status == 200){
// 这里的200表示数据是正常的
alert(xhr.responseText);
// xhr.responseXML
}
}
}
}
}
</script>
</head>
<body>
<form>
用户名：
<input type="text" name="username" id="username"><span id="info"></span>
<br> 密码：
<input type="text" name="password" id="password">
<input type="button" value="登录" id="btn">
</form>
</body>
</html>
上一篇： python的高级特性
下一篇： python strip()函数易错点