Ajax教程实例详解-前端开发

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。接下来通过本文给大家介绍Ajax教程实例详解，对ajax相关知识感兴趣的朋友一起学习吧

什么是 AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

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

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下(AJAX 是一种用于创建快速动态网页的技术)。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

XMLHttpRequest 对象

Ajax的核心是JavaScript对象XmlHttpRequest


<script type="text/javascript">
function createXHR(){
var xhr = null;
try {
// Firefox, Opera .+, Safari，IE+
xhr = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer 
try {
xhr = new ActiveXObject("Msxml.XMLHTTP");
}
catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
xhr = null;
}
}
}
return xhr;
}
</script>

XMLHttpRequest对象用法

XMLHttpRequest对象有两个重要方法 open与send


xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState== && xmlhttp.status==)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}

我们可以在接受响应之前调用abort方法取消异步请求：XMLHttpRequest .abort();

注意：

在使用XMLHttpRequest对象的send()方法时，如果使用的是get请求或者不需要发送数据的post请求时，需要使用send(null);

如果想要发送数据数据，则需要使用post请求，先使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：


xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

以上内容是小编给大家介绍的Ajax教程实例详解，希望对大家有所帮助！