ajax的主要步驟（講解1）

時間 2019-11-07

標籤 ajax 主要步驟講解欄目 Ajax 简体版

原文原文鏈接

今天主要對ajax作一個簡單步驟，就是剛學，先作個簡單步驟，後面還要進一步更新ajax的知識css

事先把作好的例子粘貼過來，就拿這個例子說事-----get請求方式（想要改能夠把get改成post可是之間仍是有點小小的區別和不一樣---後面都會說到或者將本身查都行）：html

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>前端

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'testAjax1.jsp' starting page</title>

   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">
   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="This is my page">
   
   <script>
   function loadXMLDoc(){
   var xmlhttp;
   //建立XMLHttp對象
   if(window.XMLHttpRequest){
   //瀏覽器執行代碼
   xmlhttp=new XMLHttpRequest();
   }else{
   //瀏覽器執行代碼
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   //設置回調函數，處理服務器相應的關鍵代碼
   xmlhttp.onreadystatechange=function(){
   if(xmlhttp.readyState==4 && xmlhttp.status==200){
   document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   }
   }
   //初始化XMLhttp組件
   xmlhttp.open("GET","testJavaScript/TestDate.jsp",true);
   //發送請求
   xmlhttp.send();
   }
   </script>
</head>
<body>
<div id="myDiv"><h2>使用ajax修改文本內容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改內容</button>
</body>
</html>
染上顏色的就是主要部分---黃色部分的文件是這樣的（testJavaScript/TestDate.jsp）java

<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>ajax

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'TestDate.jsp' starting page</title>

   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">
   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="This is my page">
   瀏覽器

</head>

<body>
<%
Date date=new Date();
SimpleDateFormat df =new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
out.print("當前時間"+df.format(date));
%>
</body>
</html>服務器

說白了就是一個簡單的腳本----顯示時間的腳本，運行的結果是這樣的：jsp

運行前：函數

運行後：點擊修改內容後post

就對以上示例作個簡單的步驟分解：

1：建立XMLLHttpRequest對象

var xmlhttp;
   //建立XMLHttp對象
   if(window.XMLHttpRequest){
   //瀏覽器執行代碼---返回true說明就是新版本IE瀏覽器或其餘瀏覽器
   xmlhttp=new XMLHttpRequest();
   }else{
   //瀏覽器執行代碼--返回false說明就是老版本IE瀏覽器（IE5或者是IE6）
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }

2：設置回調函數

xmlhttp.onreadystatechange=function(){
   if(xmlhttp.readyState==4 && xmlhttp.status==200){
   document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   }
   }