Ajax技术

Posted douflamingo-666

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax技术相关的知识,希望对你有一定的参考价值。

ajax是一个很重要的技术。

什么是ajax,用w3c的解释就是,

AJAX = Asynchronous javascript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

这么说有点让人费解,用通俗的话说就是

就是没用AJAX的网页,你点一个按钮就要刷新一下页面,尽管新页面上只有一行字和当前页面不一样,但你还是要无聊地等待页面刷新。

用了AJAX之后,你点击,然后页面上的一行字就变化了,页面本身不用刷。

举个例子:

大学毕业拍毕业照,全班30人,一共去了29人。可是拍完之后,没参与照相的同学也想出现在照片中,该怎么办呢?

传统方式:大家再召集一次,重新拍一张。

Ajax:把这名同学PS进去

这就是Ajax的特点:

可以在不重新召集所有同学拍照的情况下,对照片的部分进行更新。

可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 (重新拍照理解为重新加载网页)

AJAX只是一种技术,不是某种具体的东西。不同的浏览器有自己实现AJAX的组件。

 

因为ajax的完整用法太多了,我就简单写一下他的使用步骤,

第一步,创建xmlhttprequest对象,var xmlhttp =new XMLHttpRequest();XMLHttpRequest对象用来和服务器交换数据。
//这里要针对不同的浏览器
var xhttp;
if (window.XMLHttpRequest) {
//现代主流浏览器
xhttp = new XMLHttpRequest();
} else {
// 针对浏览器,比如IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

第二步,使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器。
xmlhttp.open(method,url,async) method包括get 和post,url主要是文件或资源的路径,async参数为true(代表异步)或者false(代表同步)
xhttp.send();使用get方法发送请求到服务器。
xhttp.send(string);使用post方法发送请求到服务器。
post 发送请求什么时候能够使用呢?
(1)更新一个文件或者数据库的时候。
(2)发送大量数据到服务器,因为post请求没有字符限制。
(3)发送用户输入的加密数据。

第三步,使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
使用responseText属性得到服务器响应的字符串数据,使用responseXML属性得到服务器响应的XML数据。
eg:document.getElementById("demo").innerhtml = xhttp.responseText;

第四步,onreadystatechange函数,当发送请求到服务器,我们想要服务器响应执行一些功能就需要使用onreadystatechange函数,每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。
onreadystatechange属性存储一个当readyState发生改变时自动被调用的函数。
readyState属性,XMLHttpRequest对象的状态,改变从0到4,0代表请求未被初始化,1代表服务器连接成功,2请求被服务器接收,3处理请求,4请求完成并且响应准备。
status属性,200表示成功响应,404表示页面不存在。
在onreadystatechange事件中,服务器响应准备的时候发生,当readyState==4和status==200的时候服务器响应准备。
eg:
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
//函数作为参数调用
<!DOCTYPE html>
<html>
<body>
<p id="demo">Let AJAX change this text.</p>
<button type="button"
onclick="loadDoc(‘index.aspx‘, myFunction)">Change Content
</button>
<script>
function loadDoc(url, cfunc) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
cfunc(xhttp);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction(xhttp) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>
</body>
</html>

 

当然这只是一些简单的用法,在w3c上面还有一些高级用法,例如利用ajax从数据库读取信息,读取XML的信息等。

最后想说,对于做后台开发的来说,ajax是一门很重要的技术,前端也是!




























































以上是关于Ajax技术的主要内容,如果未能解决你的问题,请参考以下文章

AJAX安全技术

Ajax技术使用

Ajax技术

Ajax技术概述

今晚直播:AJAX网页无刷新技术

初识Ajax技术