javascript
jquery如何实现ajax技术,使用JavaScript和jQuery简单实现Ajax技术(示例代码)
Ajax的定義
Ajax被認為是(Asynchronous JavaScript and XML的縮寫)。?允許瀏覽器與服務器通信而無須刷新當前頁面的技術都被叫做Ajax。
Ajax的工作原理
Ajax的核心是JavaScript對象XmlHttpRequest。XmlHttpRequest使您可以使用JavaScript向服務器提出請求并處理響應，而不阻塞用戶。
一、使用JavaScript實現Ajax技術
1.首先建立一個jsp頁面,導入js頁面并且新建一個測試按鈕。
2.其中我們在js頁面先需要獲取XmlHttpRequest對象,并且需要處理兼容問題
獲取XmlHttpRequest對象functiongetXMLHttpRequest() {var xmlHttpReq=null;if (window.XMLHttpRequest) {//Mozilla 瀏覽器
xmlHttpReq = newXMLHttpRequest();
}else{if (window.ActiveXObject) {//IE 瀏覽器
try{
xmlHttpReq= new ActiveXObject("Microsoft.XMLHTTP");
}catch(e) {try {//IE 瀏覽器
xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e) {
}
}
}
}return xmlHttpReq;
3.接著在相同頁面下開始寫onload事件(get方法發送數據)
window.onload = function(){var btnDom=document.getElementById("btn");
btnDom.οnclick= function(){//ajax步驟
//1
var xhr =getXMLHttpRequest();//2.監聽響應 如何判斷能夠正確請求和響應
xhr.onreadystatechange = function(){if(xhr.readyState == 4){ //響應結束
if(xhr.status == 200){ //正確響應
//接收響應數據
var data =xhr.responseText;
alert(data);
}
}
};//3.打開連接
/** method: get 或 post
* url: 請求路徑
* async: true(表示異步，默認) false*/xhr.open("get","../ajaxGetServlet?age=18&userName=jack",true);//4.發送數據
xhr.send(null); //使用get請求send發送的數據都為null,且不能省略這一步
};
};
或者使用(post請求//第3第4步驟有區別)
window.onload = function(){var btnDom=document.getElementById("btn");
btnDom.οnclick= function(){//1
var xhr =getXMLHttpRequest();//2.
xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status == 200){var data =xhr.responseText;
alert(data);
}
}
};//3.
xhr.open("post","../ajaxPostServlet",true);/** 4.發送數據
* send() string或null
* String類型一般為鍵值對 "username=zhangsan"
* get請求 都是send(null)
* post請求要send數據需要設置請求頭*/xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("user=admin&age=12");
};
};
其中步驟3的url需要我們創建一個servlet
public class AjaxGetServlet extendsHttpServlet {public voiddoGet(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {
String age= request.getParameter("age");
String userName= request.getParameter("userName");
System.out.println(age+"------"+userName);//響應數據
response.getWriter().print("hello"); //js中步驟2監聽響應
}public voiddoPost(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {
doGet(request, response);
}
}
代碼寫完以后,我們只需要按一下(value="ajax")測試按鈕就可以使用ajax技術實現異步請求與響應。
二、使用jQuery實現Ajax技術
案例:如何使用ajax技術實現用戶注冊時用戶名是否被占用?
1.jsp注冊頁面
jquery 實現 ajax
用戶名：
2.js頁面(無需手動獲取XmlHttpRequest對象)
$(function(){
$("#userName").blur(function(){var name = $(this).val();if(name.trim() == ""){return;
}//jquery 實現 ajax
$.ajax({
url:"../jqueryUserName", //請求的路徑
type:"post", //請求方式 默認是get
data: { //要發送的數據
"name":name
},
dataType:"text", //響應數據的類型
success:function(result){ //正確響應
if(result == "yes"){
$("#msg").html("用戶名可以使用");
}else{
$("#msg").html("用戶名被占用");
}
},
error:function(){
alert("請求失敗！");
}
});
});
});
3.servlet頁面(獲取用戶名比較是否被占用)
public class JqueryUserName extendsHttpServlet {public voiddoGet(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {
System.out.println("jquery ajax 驗證用戶名！");
PrintWriter out=response.getWriter();
String name= request.getParameter("name");if("ajax".equals(name) || "admin".equals(name) || "jack".equals(name)){//用戶名已被使用
out.print("no");
}else{
out.print("yes");
}
}public voiddoPost(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {
doGet(request, response);
}
}
總結
以上是生活随笔為你收集整理的jquery如何实现ajax技术,使用JavaScript和jQuery简单实现Ajax技术(示例代码)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ftp服务器新建虚拟目录,ftp服务器
- 下一篇： nashorn js 调用 java_从