標籤：視頻 org import protected lan err for mic open
1、Ajax是什嗎？
簡單來說ajax是一個局部的重新整理技術，通過向伺服器發送並且獲得請求來重新整理某一個局部介面，而不是整個介面的重新整理。
它是通過在html頁面中使用JavaScript和XmlHttpRequest來向伺服器發送和擷取資料。它可以實現頁面的局部重新整理和非同步重新整理。
2、如果沒有Ajax會怎麼樣
假如你在看網路視頻的時候，如果沒有ajax這個局部重新整理技術，那麼每次你評論視頻的時候都會重新整理頁面。這樣每次評論後，你都只能從重頭開始播放了，是不是十分的麻煩。
3、通過頁面的局部重新整理加法來體驗一下ajax帶來的好處
首先是servlet端，擷取前端送來的i和j的值並計算後返回。
代碼
package com.xyf.web6;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class Ajax1Servlet extends HttpServlet{ @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String action = req.getParameter("action"); if(action==null||action.length()<0) { req.getRequestDispatcher("/Ajax1.jsp").forward(req, resp); } else if(action.equals("add")) { int i = Integer.parseInt(req.getParameter("i")); int j = Integer.parseInt(req.getParameter("j")); resp.setContentType("text/html"); resp.getWriter().print(i+j); System.out.println("資料已擷取"); } }}
JSP端，通過getbyid來獲得表單input中add的值，然後在javascript裡取得i和j的值，並將它封裝為ajax請求後再發出，需要注意的是send程式執行之後程式並沒有結束
通過onreadystatechange監聽 事件，當請求被發送到伺服器時，才開始執行響應後結束。
代碼
<%@ 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"> window.onload=function(){ var add = document.getElementById("add"); add.onclick=function(){ var i = document.getElementById("i").value; var j = document.getElementById("j").value; //XHR對象執行，發出Http請求，頁面不用重新整理 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘); //建立XMLHTTP對象，考慮相容性 xhr.open("POST","ajax1?action=add&i="+i+"&j="+j,true); xhr.onreadystatechange=function(){ alert("onreadystatechange,readyState="+xhr.readyState); if(xhr.readyState==4)//伺服器返回了 { if(xhr.status==200)//xhr.status http狀態代碼 { alert(xhr.responseText);//xhr.responseText返回的報文體 document.getElementById("result").innerText = xhr.responseText; //根據伺服器返回的內容更新需要更新的內容 } else { alert("伺服器返回錯誤"); } } }; alert("send之前"); xhr.send();//發出請求。並不會等伺服器返回send方法才結束，因為我們需要提前監聽xhr.onreadystatechange // 事件，以便得知“伺服器返回了” alert("send之後"); }; };</script></head><body><input type="text" id="i"/>+<input type="text" id="j"/><input type="button" id="add" value="="/><span id="result"></span></body></html>
它的載入順序為，在表單提交按鈕之後獲得i和j的值，並將他封裝為ajax請求傳送到伺服器（此時前端的ajax事件處於監聽狀態），在伺服器擷取到後再將他傳送回來時候，頁面完成了局部的重新整理。
未完待續
JavaWeb-----------Ajax
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
