初步认识Ajax及其基础应用

标签：

初步认识Ajax及其基础应用

　　Ajax(Asynchronous JavaScript And XML)是服务器和客户端相结合的一种技术，由其英文单词可看出其包含JavaScript和XML，当然另外还包含CSS样式、XMLHttpRequest数据交互对象和DOM文档对象等技术。

　　Ajax主要用于网页的局部刷新，用户在输入框中输入时激发文本框事件，该事件会激发JavaScript程序去响应服务器，由于JavaScript不支持服务器通信，因此需要

XMLHttpRequest与服务器进行交流；XMLHttpRequest接受到服务器数据之后，JavaScript使用返回数据生成新的文档元素，文档元素的样式由CSS实现。

　　创建一个Ajax的步骤,在JavaScript中书写：

　　首先需要判断在哪个浏览器中运行

　　//创建Ajax原生对象
　　function createXMLHttpRequest() {
　　　　if (window.ActiveXObject) { //IE5、IE6
　　　　　　return new ActiveXObject("Microsoft.XMLHTTP");
　　　　}else if(window.XMLHttpRequest){ //其它浏览器
　　　　　　return new XMLHttpRequest();
　　　　}
　　}　

　　然后

　　window.onload = function () {
　　　　$("#btnSubmit").click(function () {
　　　　　　//1.创建原生对象XMLHttpRequest
　　　　　　var xhr = createXMLHtpRequest();

　　　　　　//2.设置回调函数
　　　　　　xhr.onreadystatechange = function () {
　　　　　　　　if (xhr.readyState == 4 && xhr.status == 200) {
　　　　　　　　　　document.getElementById(‘txtMsg‘).innerHTML = xhr.responseText;
　　　　　　　　}
　　　　　　}

　　　　　　//3.初始化原生对象
　　　　　　xhr.open("GET", "Text.aspx", true);

　　　　　　//发送请求
　　　　　　xhr.send(null);
　　　　});
　　}

　　说明：通过onreadystatechange ()方法设置回调函数，处理服务器返回结果,这里使用的open()方法是为了初始化XMLHtpRequest对象，第一个值可以为GET和POST，第二个值是目标资源URL的字符串，迪桑值表示是否为异步请求；readyState有(0、1、2、3、4)五个值，只有她等于4的时候才表示数据接收完毕；status为200的时候表示返回的数据正确。

　　XMLHttpRequest对象的属性有responseText、responseXML、responseStream,根据属性的不同返回的类型不同：

　　对于responseText：

　　document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

　对于responseXML:
　xmlDoc = xmlhttp.resopnseXML;
　text = "";
　x = xmlDoc.getElementsByTagName("artist");
　for(var i = 0;i < x.length; i++)
　{
　　　text = text + x[i].childNodes[0].nodeValue + "<br/>";　
  }
　向服务器发送请求时，可以使用XMLHttpRequest的open()和send()方法
　GET和POST的比较
　GET请求：
　 xmlhttp.open("GET","Demo_Get.aspx",true);
  xmlhttp.send();
　POST请求
　xmlhttp.open("GET","Demo_Get.aspx",true);
　xmlhttp.send();

使用GET请求有容量的限制，而且也不安全，而POST请求无限制，相对来说数据更安全。

初步认识Ajax及其基础应用

标签：

原文地址：http://www.cnblogs.com/tang-yu-xiang/p/4640998.html