Ajax(學習筆記）

時間 2019-12-08

標籤 ajax 學習筆記欄目 Ajax 简体版

原文原文鏈接

何爲Ajax

英文：Asynchronous JavaScript and XML 意思是異步JavaScript和XML。客戶端與服務端在不刷新整個瀏覽器的狀況下，與服務器進行異步通信的技術,實際上是幾種技術的融合javascript

XHTML和CSS的基於標準的表示技術html
DOM進行動態顯示和交互java
XML和XSLT進行數據交換和處理ajax
XMLHttpRequest進行異步數據檢索數據庫
Javascript將以上技術融合在一塊兒瀏覽器

使用Ajax的緣由

未使用Ajax時我們的網頁若是想要刷新局部內容。那麼須要從新載入整個網頁。用戶體驗不是很好。 Ajax就是爲了解決局部刷新的問題。保持其餘部分不動，只刷新某些地方。緩存

使用Ajax

建立XMLHttpRequest對象

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");
  }
複製代碼

向服務器發送請求如需將請求發送到服務器，咱們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
複製代碼

GET 仍是 POST？與 POST 相比，GET更簡單也更快，而且在大部分狀況下都能用。然而，在如下狀況中，請使用 POST 請求：bash

沒法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

Async = true

當使用 async=true 時，請規定在響應處於 onreadystatechange事件中的就緒狀態時執行的函數：服務器

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    	alert(request.responseText);
    }
  }
複製代碼

GET請求

Demo1.jspapp

<%@ 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=ISO-8859-1">
<title>Insert title here</title>

<script type="text/javascript">
  function ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }
		return xmlHttp;
	 }
  function get(){
    //1.建立xmlhttprequest對象
     var request=ajaxFunction();

     //發送請求
     request.open("GET","/day16/DemoServlet01?name=aa&&age=18",true);
     request.send();
     
    //3.當使用 async=true 時，請規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函數
     request.onreadystatechange=function(){	
    	if(request.readyState==4&&request.status==200){
    		alert(request.responseText);
    	}
    }
  }
  </script>
</head>
<body>
	<h3>
		<a herf="" onclick="get()">使用Ajax方式發送Get請求</a>
	</h3>
</body>
</html>
複製代碼

ServletDemo01.java

package com.itklz;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ServletDemo01
 */
public class ServletDemo01 extends HttpServlet {
	private static final long serialVersionUID = 1L;
   
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		System.out.println("收到了一個請求----");
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().write("收到了一個請求");
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		doGet(request, response);
	}

}
複製代碼

運行結果

POST請求

Demo02.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=ISO-8859-1">
<title>Insert title here</title>

   <script type="text/javascript">
   
   function ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }

		return xmlHttp;
	 }
   function post(){
	  //1.建立XmlHttpRequest對象
	   var xmlHttp=ajaxFunction();
	   xmlHttp.onreadystatechange=function()
       {
       if (xmlHttp.readyState==4 && xmlHttp.status==200)
         {
       	alert(xmlHttp.responseText);
         }
       }
	  //2.向服務器發送請求
	  xmlHttp.open("POST","/D16/ServletDemo01",true);
	  //若是須要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。而後在 send() 方法中規定您但願發送的數據：
     xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	  xmlHttp.send(); 
   }
   </script>
</head>
<body>
  <h1><a href="" onclick="post()">使用Ajax使用Post請求</a></h1>
</body>
</html>
複製代碼

ServletDemo01.java

package com.itklz;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ServletDemo01
 */
public class ServletDemo01 extends HttpServlet {
 
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		System.out.println("收到了一個請求----");
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().write("收到了一個請求");
	}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("收到請求，執行get方法");
		doGet(request, response);
	}

}
複製代碼

運行結果