AJAX和服务器交互实例

这个是AJAX基础，虽然现在都直接用jQuery AJAX了，但是我还是劝你再看看这个，毕竟…我一开始找到这个了，都写出来了不看就可惜呀…

XHR基础

首先创建XMLHttpRequest对象

//ajex的基础是XMLHttpRequest();所以需要先创建一个XMLHttpRequest对象var iable=new XMLHttpRequest();// IE5 IE6等老版本使用 ActiveX 对象var iable=new ActiveXObject("Microsoft.XMLHTTP");//为了应对所有的现代浏览器，包括 IE5 和 IE6，需要检查浏览器是否支持 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：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");  }

请求

/** * @Param GET or POST * @Param url * @param asyn(boolean) * * 它还有个构造方法是5个参数 * 最后两个参数username和password */xmlhttp.open("GET","http://192.168.4.87:8080/login",true);xmlhttp.send();

响应

• responseText
• responseXML

//看名字就知道,下面是获取textxmlhttp.responseText;//需要显示的话直接显示出来就行了document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//看名字就知道,下面是获取xml，然而XML需要解析xmlhttp.responseXML;//首先获取到返回的xml信息xmlDoc=xmlhttp.responseXML;    txt="";    //获取books.xml的title    x=xmlDoc.getElementsByTagName("title");    //遍历出xml所有的title信息    for (i=0;i<x.length;i++)      {      txt=txt + x[i].childNodes[0].nodeValue + "<br />";      }      //现在就可以显示出来了    document.getElementById("myDiv").innerHTML=txt;    }

<!--这是一个books.xml--><bookstore><book category="children"><title lang="en">Harry Potter</title><author>J K. Rowling</author><year>2005</year><price>29.99</price></book><book category="cooking"><title lang="en">Everyday Italian</title><author>Giada De Laurentiis</author><year>2005</year><price>30.00</price></book><book category="web" cover="paperback"><title lang="en">Learning XML</title><author>Erik T. Ray</author><year>2003</year><price>39.95</price></book><book category="web"><title lang="en">XQuery Kick Start</title><author>James McGovern</author><author>Per Bothner</author><author>Kurt Cagle</author><author>James Linn</author><author>Vaidyanathan Nagarajan</author><year>2003</year><price>49.99</price></book></bookstore>

onreadystatechange 事件

一般情况下，你可以把它理解为callback，以前只知道web是单线程，自从有了ajax，也就有了异步，不得不说是一个巨大的进步。

属性 描述 onreadystatechange 存储函数，随着readyState改变 readyState XMLHttpRequest 状态码 status 请求状态

附录

<!--XMLHttpRequest状态-->0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪<!--请求状态-->200: "OK"404: 未找到页面<!--响应就绪状态需要-->xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    <!--请求成功之后执行的代码-->    ...    }  }

jQuery中的AJAX

//首先引入jQuery<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>//然后直接调用吧$.ajax({    cache: true,    url: "http://192.168.4.87:8080/login2",    type:"POST",    //要提交的数据    data:{username:$("#user").val(), password:$("#pass").val()},    //请求失败    error: function(request) {    alert("Connection error");        },    //请求成功    success: function(data) {        window.location.href = 'index.html';      }});