ajax相关案例代码

原声的js使用ajax（这种方式比较的麻烦，后面会有jquery的封装比较简单）

在使用ajax时必须创建XMLHttpRequest

function createXMLHttpRequest() {

var xmlHttp;

try { 

 // Firefox, Opera 8.0+, Safari

 xmlHttp = new XMLHttpRequest();

} catch (e) {

  try {// Internet Explorer

  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

 } catch (e) {

  try {

   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

  } catch (e) {

  }

 }

}

 

return xmlHttp;

}

ajax代码（get请求）

function ajaxGet() {

 // 1.创建异步XMLHttpRequest对象

 var xhr = createXMLHttpRequest();

 // 2.设置状态改变触发一个函数

 xhr.onreadystatechange = function(){

 //回调函数.

  if(xhr.readyState == 4){// 请求发送完成，0对象建立，未调用open方法，1未调用send，2数据发送 3传送数据 4完成

   if(xhr.status == 200){// 响应也正确

    var data = xhr.responseText;

    document.getElementById("d1").innerHTML=data;

   }

  }

 }

// 3.打开一个连接：

xhr.open("GET","/WEB15/ServletDemo1",true);

// 4.发送请求

xhr.send(null);//get请求，这里不需要参数

}

function ajaxPost(){

 var xhr = createXMLHttpRequest();

 xhr.onreadystatechange = function(){

  if(xhr.readyState == 4){

   if(xhr.status == 200){

    document.getElementById("d1").innerHTML=xhr.responseText;

   }

  }

 }

 xhr.open("POST","/***",true);

 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

 xhr.send("name=张三");

}

jquery中的ajax

$.get("/***",{"name":"李四"},function(data){

 $("#target").html(data);//这是回调方法，数据从后台返回

});

$.post("/***",{"name":"李四"},function(data){

 $("#target").html(data);

});

使用ajax方法

$.ajax({

 type:"post",

 url:"/***",

 data:"name=aaa&password=123",

 success:function(data){

  $("#target").html(data);

 }

});