accp8.0轉換教材第10章Ajax和jQuery理解與練習
C/S （Client/Server）結構，即大家熟知的客戶機和服務器結構。
B/S（Browser/Server）結構即瀏覽器和服務器結構。
認識ajax 、XMLHttpRequest、使用jquery實現ajax、處理json格式的響應數據、使用原生態JavaScript實現ajax
一.雜記
1.傳統web技術和ajax的請求方式不同 ajax是只獲得需要的元素 傳統刷新全部
2.ajax的全稱是“Asynchronous Javascript And XML”（異步JavaScript和XML）
3.ajax的工作流程 用戶界面通過JavaScript到ajax發送http請求---服務器（處理請求）
再返回xml/json/html數據到ajax引擎再由dom+css返回到用戶界面
4.XMLHttpRequest提供異步發送請求能力
常用方法
open(String method,String url,boolean async)創建一個新的HTTP請求、
send(String data) 發送請求到服務器端、
setRequestHeader(String header,String value)設置請求的某個HTTP頭信息、
5.老版本的IE瀏覽器和新版的即大部分瀏覽器的創建XMLHttpRequest不一樣
6.事件onreadystatechange：回調函數
二.上機部分
1.實現檢查註冊用戶的郵箱是否存在（使用原生態JavaScript實現ajax）
<div style="left: 2200px;">
<form action="" method="get">
註冊郵箱：<input type="text" id="email" onblur="checkemail()" ><label id="samp">*</label><br/><br/>
用戶名：<input type="text">*<br/><br/>
密碼：<input type="password">*<br/><br/>
確認密碼：<input type="password">*<br/><br/>
<div style="margin-left: 100px;"><input type="submit" value="註冊"></div>
</form>
<script type="text/javascript" language="JavaScript">
function checkemail() {
//alert("hnjkl");
//創建XMLHttpRequest對象
if(window.XMLHttpRequest){//返回true時說明是新版本IE瀏覽器或其他瀏覽器
xmlHttpRequest=new XMLHttpRequest();
}else{//返回false時說明是老版本IE瀏覽器
xmlHttpRequest=new XMLHttpRequest("Microsoft.XMLHTTP");
}
//設置回調函數
xmlHttpRequest.onreadystatechange=callBack;
//獲取用戶名文本框的值
var email=$("#email").val();
//初始化XMLHttpRequest組件
var url="userServlet?email="+email;//服務器端URL地址，name為用戶名文本框的值
xmlHttpRequest.open("GET",url,true);
//發送請求
xmlHttpRequest.send(null);
//回調函數callBack（）中處理服務器響應的關鍵代碼
function callBack(){
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
var date=xmlHttpRequest.responseText;
if(date=="true"){
$("#samp").html("郵箱已被占用");//samp為顯示消息的samp的id
}else{
$("#samp").html("郵箱可註冊");
}
}
}
}
</script>
</div>
在servlet中代碼如下
package web;
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 userServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("UTF-8");
boolean emailCheck=false;
String email=request.getParameter("email");
if("[email protected]".equals(email)){
emailCheck=true;
}
else {
emailCheck=false;
}
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
out.print(emailCheck);
out.flush();
out.close();
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("UTF-8");
this.doGet(request, response);
}
}
2.使用$.ajax()方法實現異步檢查註冊郵箱是否已存在
<div style="left: 2200px;">
<form action="" method="get">
註冊郵箱：<input type="text" id="email" onblur="checkemail()" ><label id="samp">*</label><br/><br/>
用戶名：<input type="text">*<br/><br/>
密碼：<input type="password">*<br/><br/>
確認密碼：<input type="password">*<br/><br/>
<div style="margin-left: 100px;"><input type="submit" value="註冊"></div>
</form>
<script type="text/javascript" language="JavaScript">
function checkemail(){
var email=$("#email").val();
$.ajax({
"url" :"userServlet",
"type" :"get",
"data" :"email="+email,
"dataType" :"text",
"success" :callBack,
"error" :function () {
alert("出現錯誤");
}
});
function callBack(data) {
if(data=="true"){
$("#samp").html("郵箱已被占用");//samp為顯示消息的samp的id
}else{
$("#samp").html("郵箱可註冊");
}
}
}
</script>
</div>
3.以常見頁面元素展示JSON數據
<%@ 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 ‘workthree.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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var personary=["大東-河南省周口13838381438市-","小順-廣東省xx市"];
var person=[{"id":"1001","name":"大東","address":"河南省周口市","phone":"13838381438"},
{"id":"1002","name":"小圳","address":"湖南省xx市","phone":"13838381438"},
{"id":"1003","name":"小順","address":"廣東省xx市","phone":"13838381438"},
{"id":"1004","name":"小莫","address":"河北省xx市","phone":"13838381438"}];
var $divv=$("#con");
var $table=$(" <table border=‘1‘ ></table>").append("<tr><td>ID</td><td>姓名</td><td>住址</td><td>手機</td></tr>");
$divv.append($table);
$(person).each(function(){
$table.append("<tr><td>"+this.id+"</td><td>"
+this.name+"</td><td>"
+this.address+"</td><td>"
+this.phone+"</td></tr>");
});
//2.下拉框
var $ary=$(personary);
//var $ul=$("#arul");
var $sel=$("#arse");
$ary.each(function(i) {
$sel.append("<option value=‘"+(i+1)+"‘>"+this+"</option>");
});
});
</script>
</head>
<body>
<div id="con">
</div>
<div id="conn">
<select id="arse"></select>
</div>
</body>
</html>
4.在ajax中使用JSON生成管理員新聞管理頁面
//在這裏頁面就不上傳了如有需要完整項目代碼在csdn能找到 搜狗搜索 （accp8.0轉換教材第X章）就能下載
//最主要的是js
/**
* Created by Administrator on 2017/7/4.
*/
$(function(){
$.ajax({
"url":"userServlet2",
"type":"POST",
"data":"por=user",
"dataType":"json",
"success":callBack
});
$("#news").click(function(){
initnews();
});
$("#topics").click(function(){
inittopics();
});
});
function callBack(data){
var $data=$(data);
var $userul=$("#userul");
$data.each(function(){
$userul.append("<li>"+this.naem+" "+this.pwd+" <a href=‘‘>修改</a> <a href=‘‘>刪除</a></li>");
});
}
function initnews(){
$.ajax({
"url":"userServlet2",
"type":"POST",
"data":"por=news",
"dataType":"json",
"success":callNews
});
function callNews(news){
//alert("ddd");
var $userul=$("#userul").empty();
for(var i=0;i<news.length;){
$userul.append(
"<li>"+news[i].title+" "+news[i].author+" <a href=‘‘>修改</a> <a href=‘‘>刪除</a></li>"
);
i++;
if(i==news.length){
break;
}
}
}
}
function inittopics(){
$.ajax({
"url":"userServlet2",
"type":"POST",
"data":"por=top",
"dataType":"json",
"success":callTopics
});
function callTopics(top){
var $userul=$("#userul").empty();
for(var i=0;i<top.length;){
//alert("ddd");
$userul.append(
"<li>"+top[i].topics+" <a href=‘‘>修改</a> <a href=‘‘>刪除</a></li>"
);
i++;
if(i==top.length){
break;
}
}
}
}
//servlet代碼
package web;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import dao.newlist;
import dao.topdao;
import daoImpl.newlistimpl;
import daoImpl.topimpl;
import entity.news;
import entity.top;
public class userServlet2 extends HttpServlet{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
//doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("UTF-8");
String por=request.getParameter("por");
if(por.equals("news")){
newlist nd=new newlistimpl();
List<news> listnews=nd.allnewslist();
StringBuffer newssub=new StringBuffer("[");
for(int i=0;;){
news n=listnews.get(i);
newssub.append("{\"title\":\""+n.getNtitle()+"\",\"author\":\""+n.getAuthour()+"\"}");
i++;
if(i==listnews.size()){
break;
}else{
newssub.append(",");
}
}
newssub.append("]");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
out.print(newssub);
out.flush();
out.close();
}
else if(por.equals("top")){
topdao nd=new topimpl();
List<top> listtop=nd.alltop();
StringBuffer topsub=new StringBuffer("[");
for(int i=0;;){
top top=listtop.get(i);
topsub.append("{\"topics\":\""+top.getTcontent()+"\"}");
i++;
if(i==listtop.size()){
break;
}else{
topsub.append(",");
}
}
topsub.append("]");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
out.print(topsub);
out.flush();
out.close();
}
}
}
5.在ajax中使用JSON生成主題管理頁面
//在上機四中
五.總結部分
1.傳統的web開發技術通過瀏覽器發送請求 而ajax通過JavaScript的xmlhttprequest對象發送
傳統的響應的是一個完整頁面 而JavaScript返回需要的數據
2.Ajax 的關鍵元素
→JavaScript語言：Ajax技術的主要開發語言
→XML/JSON/HTML:用來封裝數據
→DOM（文檔對象模型）：修改頁面元素
→CSS：改變樣式
→Ajax引擎：即XMLHttpRequest對象
3.創建XMLHttpRequest對象的方式（兩種新的和舊的）
歡迎提問，歡迎指錯，歡迎討論學習信息 有需要的私聊 發布評論即可 都能回復的
原文在博客園http://www.cnblogs.com/a782126844/有需要可以聯系扣扣：2265682997
accp8.0轉換教材第10章Ajax和jQuery理解與練習