AJAX 請求數據
AJAX簡介: javascript
asynchronouse javascript and xml html
1.爲何要用ajax?? java
異步操做,發送了一個異步的request,這時用戶不用等待 ,能夠進行後續的操做,能更大限度的提高用戶體驗度 特色: 返回一張頁面的局部內容 異步刷新 web
2.簡單使用步驟: ajax
1.獲取對象 數據庫
Firefox 瀏覽器
var xhr = new XMLHttpRequest(); 緩存
IE 服務器
* var xhr = new ActiveXObject("Microsoft.XMLHTTP"); app
var xhr = new ActiveXObject("MSXML2.5.0.XMLHTTP");
var xhr = new ActiveXObject("MSXML2.4.0.XMLHTTP");
2.重要屬性
xhr.readyState 數字類型的屬性,瀏覽器爲這個屬性賦值
0 xhr初始化 (未鏈接)
1 xhr發送請求 (創建鏈接)
2 xhr|Servlet接受到請求 (協議頭已接收)
3 Servlet提供response的時候 (正在接收協議體)
4 response到達html頁面時候 (完成)
xhr.status 服務器返回的http協議號
200 正常返回的狀態碼
404
500
*** 事件
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//代碼塊
}
}
3.方法
xhr.open("POST|GET",url,(是否異步true)) 創建鏈接
xhr.send(); 傳輸數據
ajax使用:
1.獲取對象
2.創建鏈接發送請求
3.得到服務器返回的結果
4.處理結果
開發過程:
1.服務器端程序
2.頁面腳本
1)建立對象
2)設置監聽函數
3)處理請求
3.獲取相應的屬性:
xhr.responseXML - DOM對象
得到服務器返回的xml數據
服務器必須設置: response.setContentType("text/xml")
xhr.responseText
$(span).innerHTML=xhr.responseText;
屢次執行ajax請求,怎麼解決瀏覽器緩存的問題?(IE問題比較嚴重)
1.改變請求路徑
get方式:
xhr.open("get","show?r="+Math.random());
post方式:
xhr.send(path+"&r="+Math.random());
2.在服務器端程序中,要求瀏覽器不緩存數據
response.setHeader("cache-control","no-cache");
//清空瀏覽器緩存
response.setHeader("progma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
===================
封裝ajaxUtil
var Ajax = {
createXHR:function(){
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
return xhr;
}else if(window.ActiveXObject){
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
return xhr;
}
},
sendRequest:function(method,url,data,callback){
var xhr = this.createXHR();
xhr.open(method,url);
if(method=="GET"){
xhr.send(null);
}else if(method=="POST"){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var p = {
text:xhr.responseText,
xml:xhr.responseXML
}
callback(p);
}
}
}
};
---------------------------------------------------------------------------------------------------------
簡單例子:
/**
* 用戶名驗證舉例
* reg1.html 常規寫法
* reg2.html 用到了封裝好的ajaxUtil.js
*/
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CheckServlet extends HttpServlet {
protected void service(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
// 清空瀏覽器緩存
response.setHeader("progma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
// 接收表單數據
String name = request.getParameter("name");
PrintWriter out = response.getWriter();
// 鏈接數據庫處理
// biz--dao
if("jim".equals(name)){
out.println("username is registered");
}else{
out.println("username is ok ");
}
out.close();
}
}
Html代碼:
reg1.html
<html>
<head>
<script type="text/javascript">
function $(tagId){
return document.getElementById(tagId);
}
function checkUserName(){
var name = $("nameId").value;
var xhr ;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET","/ajax/check?name="+name);
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
var ret = xhr.responseText;
var span = $("msgId");
span.innerHTML = "<font color='red'>"+ret+"</font>" ;
}
}
}
</script>
</head>
<body>
<h1>User Register</h1>
<table>
<tbody>
<tr>
<td>User Name</td>
<td><input type="text" id="nameId" name="name" onblur="checkUserName();"/>
<span id="msgId"></span>
</td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<td>confirm </td>
<td><input type="password"/></td>
</tr>
<tr>
<td>email</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>phone:</td>
<td><input type="text" maxlength="9"/></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="user register" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
reg2.html
<html>
<head>
<script type="text/javascript" src="ajaxUtils.js"></script>
<script type="text/javascript">
function $(tagId){
return document.getElementById(tagId);
}
function checkUserName(){
var name = $("nameId").value;
Ajax.sendRequest("POST","/ajax/check","name="+name,cb);
}
function cb(c){
var ret = c.text;
var span = $("msgId");
//innerHTML做用 方便往標籤中增長內容
span.innerHTML = "<font color='red'>"+ret+"</font>" ;
}
</script>
</head>
<body>
<h1>User Register</h1>
<table>
<tbody>
<tr>
<td>User Name</td>
<td><input type="text" id="nameId" name="name" onblur="checkUserName();"/>
<span id="msgId"></span>
</td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<td>confirm </td>
<td><input type="password"/></td>
</tr>
<tr>
<td>email</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>phone:</td>
<td><input type="text" maxlength="9"/></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="user register" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
Xml代碼:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>CheckServlet</servlet-name>
<servlet-class>web.CheckServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CheckServlet</servlet-name>
<url-pattern>/check</url-pattern>
</servlet-mapping>
</web-app>
驗證:
http://localhost:8080/ajax/reg2.html
附:Ajax簡易封裝工具類ajaxUtil.js
var Ajax = { createXHR:function(){
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
return xhr;
}else if(window.ActiveXObject){
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
return xhr;
}
},
sendRequest:function(method,url,data,callback){
var xhr = this.createXHR();
xhr.open(method,url);
if(method=="GET"){
xhr.send(null);
}else if(method=="POST"){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var p = {
text:xhr.responseText,
xml:xhr.responseXML
}
callback(p);
}
}
}
};
- 1. ajax請求數據
- 2. AJAX跨域請求數據
- 3. ajax請求數據格式
- 4. AJax數據請求處理
- 5. Ajax請求後臺數據
- 6. MUI AJAX Raw請求數據
- 7. jQuery ajax數據請求
- 8. Ajax延遲請求數據
- 9. ajax 請求數據接口
- 10. AJAX 異步請求數據
- 更多相關文章...
- • HTTP 請求方法 - HTTP 教程
- • 僞造請求超時的ICMP數據包 - TCP/IP教程
- • Flink 數據傳輸及反壓詳解
- • TiDB 在摩拜單車在線數據業務的應用和實踐
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
- 1. ajax請求數據
- 2. AJAX跨域請求數據
- 3. ajax請求數據格式
- 4. AJax數據請求處理
- 5. Ajax請求後臺數據
- 6. MUI AJAX Raw請求數據
- 7. jQuery ajax數據請求
- 8. Ajax延遲請求數據
- 9. ajax 請求數據接口
- 10. AJAX 異步請求數據