Ajax的两种实现方式

//ajax的jquery实现
function aclick(){
//alert("测试一");
var name = $("#userName").val();
//alert(name);
$.get("servlet/AjaxServlet?name=" + name ,null,back);
}


function back(data){
//alert(data);
$("#message").html(data);
}




//ajax的普通实现
var xmlHttpRequest = null;   //javascript的浏览器内置对象,XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础
function ajaxRequest(){
//alert("测试二");
if(window.ActiveXObject) //IE浏览器,判断浏览器是否支持ActiveX控件
{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");   //创建XMLHttpRequest对象
}else if(window.XMLHttpRequest) //除IE以外的其他浏览器
{
xmlHttpRequest = new XMLHttpRequest();
}
if(null != xmlHttpRequest)
{
var v1 = document.getElementById("userName").value;
var v2 = document.getElementById("userName").value;

//准备向服务器发出一个请求

//get方式发出一个请求
xmlHttpRequest.open("GET","servlet/AjaxServlet?name=" + v1, true);

//post方式向服务器发出一个请求
//xmlHttpRequest.open("POST", "AjaxServlet",true);

//发生转台变换的时候调用回调函数
xmlHttpRequest.onreadystatechange = ajaxCallBack;

//使用post提交的时候 必须叫上如下代码
//xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

//向服务器发出一个请求
xmlHttpRequest.send("name="+v1+"&v2=" +v2);
}
}


function ajaxCallBack(){
if(xmlHttpRequest.readyState==4){
//ReadyState取值 描述 
//0  描述一种"未初始化"状态;此时,已经创建一个XMLHttpRequest对象,但是还没有初始化。 
//1  描述一种"发送"状态;此时,代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。 
//2  描述一种"发送"状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。 
//3  描述一种"正在接收"状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。 
//4  描述一种"已加载"状态;此时,响应已经被完全接收。 
if(xmlHttpRequest.status==200){
var content = xmlHttpRequest.responseText;
document.getElementById("message").innerHTML = content;
}
}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值