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技术的主要内容，如果未能解决你的问题，请参考以下文章