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

//看名字就知道,下面是获取text
xmlhttp.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';
      }
  
});