AJAX AJAX简介

来源：互联网发布：sql查重复记录编辑：程序博客网时间：2024/05/23 11:13

>作用

>>他不是一种新的语言，而是一种使用给现有标准的新方法。

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

>>用于快速创建动态网页的技术。通过在后台与服务器进行少量的数据交换，AJAX可以是网页实现异步更新。

>AJAX XHR(AJAX XMLHttpRequest()

>>XHR创建对象

对象的定义：xmlhttprequest，用于在后台与服务器交换数据。

语法：variable = new XMLHttpRequest()

>XHR请求

xmlhttp.open("GET","test.txt",true);

xmlhttp.send();

方法描述open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

string：仅用于 POST 请求

发送请求的代码：

<span style="font-size:14px;"><head><script type="text/javascript">function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }xmlhttp.open("GET","/ajax/demo_get.asp",true);xmlhttp.send();}</script></head><body><h2>AJAX</h2><button type="button" onclick="loadXMLDoc()">请求数据</button><div id="myDiv"></div></body></html></span>

//说明在按钮的点击出发的函数中，建立了一个ajax对象，该对象调用匿名函数，将请求传递非服务器，然后接受返回内容，最终显示在指定位置

xmlhttp.open("GET","demo_get.asp",true);xmlhttp.send();

这是一个简单的get请求

<span style="font-size:14px;">xmlhttp.open("POST","ajax_test.asp",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("fname=Bill&lname=Gates");</span>

能够实现在send发送请求的时候添加参数。想请求添加了http的头，包括header参数和value参数

优势：

在等待服务器响应是可以执行其他脚本

当响应就绪后对响应进行处理

>XHR响应

>>发送请求得到响应

>>得到的响应包括两种形式

属性描述responseText获得字符串形式的响应数据。responseXML获得 XML 形式的响应数据。需要将响应作为xml对象进行解析

>onreadystatechange事件

每当readyState被改变是，就会触发onreadystatechange事件

readystate属性存有XMLHttpRequest的状态信息

属性描述onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status

200: "OK"

404: 未找到页面

当有多个函数触发readystate改变时，为他们建立统一的函数调用形式，此时不再适用匿名函数作为onreadystatechange 的方法，而是调用其它函数，完成这个过程。

<span style="font-size:14px;"><html><head><script type="text/javascript">var xmlhttp;function loadXMLDoc(url,cfunc){if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.onreadystatechange=cfunc;xmlhttp.open("GET",url,true);xmlhttp.send();}function myFunction(){loadXMLDoc("/ajax/test1.txt",function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  });}</script></head><body><div id="myDiv"><h2>Let AJAX change this text</h2></div><button type="button" onclick="myFunction()">通过 AJAX 改变内容</button></body></html></span>

0 0

**AJAX** AJAX简介

AJAX AJAX简介