Ajax的两种实现方式

前端之家收集整理的这篇文章主要介绍了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; } } } 原文链接:/ajax/163108.html

猜你在找的Ajax相关文章