1.ajax概述
Ajax：（Asynchronous JavaScript And XML）指異步 JavaScript 及 XML
不是一種新的編程語言，而是一種用于創(chuàng)建更好更快以及交互性更強(qiáng)的 Web 應(yīng)用程序的技術(shù)径密，是基于JavaScript享扔、XML、HTML戚啥、CSS新用法锉试。-
Ajax：只刷新局部頁面的技術(shù)
- JavaScript：更新局部的網(wǎng)頁
- XML：一般用于請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)的封裝
- XMLHttpRequest對(duì)象：發(fā)送請(qǐng)求到服務(wù)器并獲得返回結(jié)果
- CSS：美化頁面樣式
- 異步：發(fā)送請(qǐng)求后不等返回結(jié)果呆盖，由回調(diào)函數(shù)處理結(jié)果
JavaScript中XMLHttpRequest對(duì)象是整個(gè)Ajax技術(shù)的核心，它提供了異步發(fā)送請(qǐng)求的能力宙项。
不同瀏覽器株扛，甚至相同瀏覽器的不同版本，獲取該對(duì)象的方式是不同的盆繁。
<script type="text/javascript">
//1.創(chuàng)建XMLHttpRequest對(duì)象
function getXMLHttpReuest() {
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");
}
return xmlhttp;
}
window.onload = function() {
//2.獲取XMLHttpRequest對(duì)象
var req = getXMLHttpReuest();
//alert(req);//驗(yàn)證XMLHttpRequest是否獲取成功
//5.處理響應(yīng)結(jié)果
req.onreadystatechange=function(){
//alert(req.readyState);//查看鏈接狀態(tài)
if(req.readyState==4){
//alert(req.status);//查看服務(wù)器端相應(yīng)狀態(tài)
if(req.status==200){//服務(wù)器響應(yīng)正常
alert(req.responseText);//得到響應(yīng)結(jié)果
}
}
}
//3.建立鏈接油昂，共3個(gè)參數(shù):get或post請(qǐng)求冕碟、請(qǐng)求路徑匆浙、默認(rèn)true為異步請(qǐng)求，false為同步請(qǐng)求
req.open("get","${pageContext.request.contextPath }/ajaxServlet",true);
//4.發(fā)送請(qǐng)求：get方式值為null
req.send(null);
}
</script>
2.ajax方法及屬性
- 常用方法
| 方法名 | 說明 |
|---|---|
| open(method,URL,async) | 建立與服務(wù)器的連接method參數(shù)指定請(qǐng)求的HTTP方法,典型的值是GET或POST我衬，URL參數(shù)指請(qǐng)求的地址挠羔，async參數(shù)指定是否使用異步請(qǐng)求埋嵌，其值為true或false |
| send(content) | 發(fā)送請(qǐng)求，content參數(shù)指定請(qǐng)求的參數(shù) |
| setRequestHeader(header,value) | 設(shè)置請(qǐng)求的頭信息 |
- 常用屬性
- onreadystatechange：指定回調(diào)函數(shù)
- readyState: XMLHttpRequest的狀態(tài)信息
| 就緒狀態(tài)碼 | 說明 |
|---|---|
| 0 | XMLHttpRequest對(duì)象沒有完成初始化范舀，即：剛剛創(chuàng)建锭环。 |
| 1 | XMLHttpRequest對(duì)象開始發(fā)送請(qǐng)求泊藕，調(diào)用了open方法，但還沒有調(diào)用send方法玫锋。請(qǐng)求還沒有發(fā)出 |
| 2 | XMLHttpRequest對(duì)象的請(qǐng)求發(fā)送完成讼呢，send方法已經(jīng)調(diào)用悦屏，數(shù)據(jù)已經(jīng)提交到服務(wù)器，但沒有任何響應(yīng) |
| 3 | XMLHttpRequest對(duì)象開始讀取響應(yīng)散劫，還沒有結(jié)束收到了所有的響應(yīng)消息頭幕帆，但正文還沒有完全收到 |
| 4 | XMLHttpRequest對(duì)象讀取響應(yīng)結(jié)束失乾，一切都收到了 |
- status：HTTP的狀態(tài)碼
- esponseText：獲得響應(yīng)的文本內(nèi)容
- responseXML：獲得響應(yīng)的XML文檔對(duì)象documednt
- 就緒狀態(tài)是4而且狀態(tài)碼是200，才可以處理服務(wù)器數(shù)據(jù)
| 狀態(tài)碼 | 說明 |
|---|---|
| 200 | 服務(wù)器響應(yīng)正常 |
| 400 | 無法找到請(qǐng)求的資源 |
| 403 | 沒有訪問權(quán)限 |
| 404 | 訪問的資源不存在 |
| 500 | 服務(wù)器內(nèi)部錯(cuò)誤 |
3.ajax示例
驗(yàn)證用戶名是否存在：
- jsp頁面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//1.創(chuàng)建XMLHttpRequest對(duì)象
function getXMLHttpReuest() {
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");
}
return xmlhttp;
}
function ckName(){
//1.獲取用戶名
var name=document.getElementsByTagName("input")[0].value;
//2.獲取XMLHttpRequest對(duì)象
var req = getXMLHttpReuest();
//5.處理響應(yīng)結(jié)果
req.onreadystatechange=function(){
//alert(req.readyState);//查看鏈接狀態(tài)
if(req.readyState==4){//等于4的時(shí)候代表請(qǐng)求正常
//alert(req.status);//查看服務(wù)器端相應(yīng)狀態(tài)
if(req.status==200){//等于200代表服務(wù)器響應(yīng)正常
//alert(req.responseText);//得到響應(yīng)結(jié)果
var msg = document.getElementById("msg");
if(req.responseText=="true"){
msg.innerHTML="用戶名已存在";
}else{
msg.innerHTML="可以使用";
}
}
}
}
//3.建立鏈接，共3個(gè)參數(shù):get或post請(qǐng)求墓贿、請(qǐng)求路徑、默認(rèn)true為異步請(qǐng)求队伟，false為同步請(qǐng)求
req.open("get","${pageContext.request.contextPath }/regServlet?name="+name);
//4.發(fā)送請(qǐng)求：get方式值為null
req.send(null);
}
//寫法二：去掉用戶名標(biāo)簽上的onblur事件
window.onload=function(){
var nameElement = document.getElementsByName("userName")[0];
nameElement.onblur = function(){
var name = this.value;//this等價(jià)于nameElement
//創(chuàng)建XMLHttpRequest對(duì)象
var xhr = getXMLHttpRequest();
//處理結(jié)果
xhr.onreadystatechange = function(){
if(xhr.readyState==4){//請(qǐng)求一切正常
if(xhr.status==200){//服務(wù)器響應(yīng)一切正常
//alert(xhr.responseText);//得到響應(yīng)結(jié)果
var msg = document.getElementById("msg");
if(xhr.responseText=="true"){
msg.innerHTML = "<font color='red'>用戶名已存在</font>";
//msg.innerText = "<font color='red'>用戶名已存在</font>";
}else{
msg.innerHTML = "可以使用";
}
}
}
}
//創(chuàng)建連接
xhr.open("get","${pageContext.request.contextPath }/servlet/ckNameServlet?name="+name.value);
//發(fā)送請(qǐng)求
xhr.send(null);
}
}
</script>
</head>
<body>
用戶名：<input type="text" name="userName" onblur="ckName()"/><span id="msg"></span><br/>
密碼：<input type="text" name="pwd"/><br/>
</body>
</html>
- servlet
package com.rhit.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/regServlet")
public class RegServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out=response.getWriter();
String name=request.getParameter("name");
if("tom".equals(name)){
out.print(true);
}else{
out.print(false);
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
