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";
      }
      //现在就可以显示出来了
    document.getElementById("myDiv").innerHTML=txt;
    }

J K. Rowling
2005
29.99



Giada De Laurentiis
2005
30.00



Erik T. Ray
2003
39.95



James McGovern
Per Bothner
Kurt Cagle
James Linn
Vaidyanathan Nagarajan
2003
49.99

onreadystatechange 事件

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

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

附录

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


200: "OK"
404: 未找到页面


xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    
    ...
    }
  }

jQuery中的AJAX

//首先引入jQuery


//然后直接调用吧
$.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';
      }
  
});