AJAX的作用与编写
一、AJAX是什么
AJAX = Asynchronous JavaScript and XML(异步的JavaScript和XML)。
AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量的数据交换,使网页实现异步更新。(不用加载整个网页就能实现部分更新)
二、传统更新方式与AJAX的区别
传统的开发模式:用户的每一次操作都触发一次返回服务器的HTTP请求,服务器做出处理后,返回一个html页面给用户。
传统更新方式如下:
ajax开发模式:页面将用户的操作通过ajax引擎与服务器进行通信,将返回的结果给ajax引擎,然后ajax将数据插入指定位置。
AJAX的方法:
三、AJAX的编写
1创建ajax对象
1.1、XMLHttpRequest对象
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
1.2、创建 XMLHttpRequest 对象
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
oAjax=new XMLHttpRequest();
1.3、老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
2.2、open方法:
</pre><pre name="code" class="html" style="font-size: 1.2rem;"><span style="font-weight: normal;">oAjax = new ActiveXObject('Microsoft.XMLHTTP');</span>
1.4、为了使各个浏览器都能兼容(IE5和IE6),所以要进行兼容性处理(采用if的方法)
<span style="font-size:18px;font-weight: normal;">if(window.XMLHttpRequest) {
var oAjax = new XMLHttpRequest();
} else {
var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}</span>
2、连接服务器
</pre><pre name="code" class="html" style="font-size: 1.2rem;"><span style="font-weight: normal;">oAjax = new ActiveXObject('Microsoft.XMLHTTP');</span>
<span style="font-size:18px;font-weight: normal;">if(window.XMLHttpRequest) {
var oAjax = new XMLHttpRequest();
} else {
var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}</span>
2.1、get与post的区别:
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用(传输数据不能太大)。
然而,在以下情况中,请使用 POST 请求:
然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠(安全性能更高)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠(安全性能更高)
规定请求的类型、URL 以及是否异步处理请求。
open(method,url,async)
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
url:文件在服务器上的位置
async:true(异步)或 false(同步)
3、发送请求
send方法:
将请求发送到服务器。
send(string)
string:仅用于 POST 请求
通过上面的了解,我们就用get方法来获取数据和发送请求:
//2.连接服务器
//open(方法,文件名,异步传输)
oAjax.open('GET', aa.txt, true);
//3.发送请求
oAjax.send();
4、接收返回值
请求状态监控
onreadystatechange事件(请求成功则执行该函数)
onreadystatechange事件(请求成功则执行该函数)
readyState属性:请求状态
0 (未初始化)还没有调用open()方法
1 (载入)已调用send()方法,正在发送请求
2 (载入完成)send()方法完成,已收到全部响应内容
3 (解析)正在解析响应内容
4 (完成)响应内容解析完成,可以在客户端调用了
0 (未初始化)还没有调用open()方法
1 (载入)已调用send()方法,正在发送请求
2 (载入完成)send()方法完成,已收到全部响应内容
3 (解析)正在解析响应内容
4 (完成)响应内容解析完成,可以在客户端调用了
*如果readyState==4时则数据读取成功*
status属性:请求结果(等于200就是成功的)
oAjax.onreadystatechange = function() {
//oAjax.readyState 浏览器和服务器,进行到哪一步了
if(oAjax.readyState == 4) //读取完成
{
if(oAjax.status == 200) //成功
{
funone(oAjax.responseText);
} else {
funtwo(oAjax.status);
}
}
整体函数总写为:
//1.创建Ajax对象
function ajax(url,funone,funtwo) {
if(window.XMLHttpRequest) {
var oAjax = new XMLHttpRequest();
} else {
var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}
//2.连接服务器
//open(方法,文件名,异步传输)
oAjax.open('GET', url, true);
//3.发送请求
oAjax.send();
//4.接受请求
oAjax.onreadystatechange = function() {
//oAjax.readyState 浏览器和服务器,进行到哪一步了
if(oAjax.readyState == 4) //读取完成
{
if(oAjax.status == 200) //成功
{
funone(oAjax.responseText);
} else {
funtwo(oAjax.status);
}
}
};
}