AJAX是一种与服务器交换数据和更新某些网页而无需重新加载整个页面的艺术。接下来，通过这篇文章，我将向您介绍ajax教程示例。和对Ajax相关知识感兴趣的朋友一起学习吧。

什么是 AJAX

Ajax=异步JavaScript和XML(异步JavaScript和XML)。

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

AJAX是一种与服务器交换数据并更新一些网页而无需重新加载整个页面的艺术(AJAX是一种用于创建快速动态网页的技术)。

AJAX可以通过在后台与服务器交换一点数据，使网页异步更新。这意味着您可以更新网页的某些部分，而无需重新加载整个网页。

如果需要更新内容，传统的web页面(没有AJAX)必须重新加载整个web页面。

XMLHttpRequest 对象

Ajax的核心是JavaScript对象XmlHttpRequest

脚本类型='文本/javascript '

函数createXHR(){

var xhr=null

尝试{

//火狐，Opera。Safari、IE

xhr=new XMLHttpRequest()；

}

捕捉(e) {

//Internet Explorer

尝试{

xhr=new ActiveXObject('Msxml。XMLHTTP’)；

}

捕捉(e) {

尝试{

xhr=new ActiveX object(' Microsoft。XMLHTTP’)；

}

捕捉(e) {

xhr=null

}

}

}

返回xhr

}

/脚本

XMLHttpRequest对象用法

XMLHttpRequest对象有两个重要的方法：open和send。

使用XMLHttpRequest对象时首先要调用的方法是open方法，由xmlhttpRequest.open ("get "，" default.aspx "，true)调用；此代码将发送对default.aspx页面的get请求。关于这段代码有三点需要注意：

1.URL是相对于当前页面的路径，或者可以使用绝对路径。

2.调用open方法并不真正发送请求，而是初始化一个要发送的请求。

3.您只能向在同一域中使用相同协议和端口的URL发送请求，否则出于安全原因您将报告一个错误。

如果要向服务器发送请求，需要调用send方法。send方法接受一个参数，该参数是请求主体要发送的数据。如果不需要发送数据，就输入null。调用send方法后，请求将被发送到服务器，如下所示

xhr.send(空)；

请求被发送到服务器，服务器根据请求生成响应，并将其返回给XHR对象。收到响应后，相应的数据将被填充到XHR对象的属性中，并填充四个相关的属性：

1.responseText:作为响应体返回的文本。

2.responseXML:如果响应内容的类型是“text/xml”或“application/xml”，则该属性将保存包含相应数据的XML文档。

3.status:响应的HTTP状态(200、404、500等。)

4.statustext: http状态描述

Onreadystatechange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当readyState改变时，onreadystatechange事件将被触发。

readyState属性存储XMLHttpRequest的状态信息。

以下是XMLHttpRequest对象的三个重要属性：

在onreadystatechange事件中，我们指定当服务器响应准备好被处理时要执行的任务。

当readyState等于4且状态为200时，响应就绪：

xmlhttp . onreadystatechange=function()

{

if(xmlhttp . ready state==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=billname=Gates ')；

以上内容是边肖介绍的Ajax教程实例的详细讲解，希望对你有所帮助！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。