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/>
&nbsp;用户名：<input type="text">*<br/><br/>
&nbsp;&nbsp;密码：<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/>
&nbsp;用户名：<input type="text">*<br/><br/>
&nbsp;&nbsp;密码：<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+"&nbsp;&nbsp;"+this.pwd+"&nbsp;&nbsp;<a href=‘‘>修改</a>&nbsp;&nbsp;<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+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+news[i].author+"&nbsp;&nbsp;<a href=‘‘>修改</a>&nbsp;&nbsp;<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+"&nbsp;&nbsp;<a href=‘‘>修改</a>&nbsp;&nbsp;<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

时间： 2024-08-05 14:09:06

accp8.0转换教材第10章Ajax和jQuery理解与练习的相关文章

accp8.0转换教材第11章JAjax加护扩展理解与练习

①杂记:前面有原生态JavaScript实现ajax这里又多了更简单的方法实现ajax ②$.get()方法的常用参数 参数 类型 说明 url String 必选,规定发送地址 data PlainObject或String 可选,规定请求发送的数据 success Function(PlainObject data, String textStatus,jqXHR jqxhr) 可选,成功后调用的函数 参数data:可选服务器返回结果 参数textStatus:可选描述请求状态 参数jqxh

accp8.0转换教材第1章多线程理解与练习

一.单词部分: ①process进程 ②current当前的③thread线程④runnable可获取的 ⑤interrupt中断⑥join加入⑦yield产生⑧synchronize同时发生 二.预习部分 1.线程与进程的区别: 进程是系统运行程序的基本单位 线程是进程中执行运算的最小单位 2.说明创建线程的方式有哪两种 ①继承thread类 ②实现Runnable接口 3.线程的生命周期可分为几个阶段,各是什么阶段 五个阶段:①创建②就绪③运行④阻塞⑤死亡 4.使用线程的什么方法可以设置线程

accp8.0转换教材第9章JQuery相关知识理解与练习

自定义动画 一.单词部分: ①animate动画②remove移除③validity有效性 ④required匹配⑤pattern模式 二.预习部分 1.简述JavaScript事件和jquery事件方法不同 前者需要在 前面加on后者不要 2.调用执行jquery中的hasclass()方法能实现什么功能 查找是否有这个样式 3.validity:对象有哪些常用属性 toolong:判断输入的值是否超过限定字符 typemismatch:输入值是否与表单匹配 customError:自定义验证

accp8.0转换教材第7章JavaScript操作DOM对象理解与练习

程序调试,chrome开发人员工具,DOM操作,节点和节点间的关系,节点信息,操作节点,获取元素 一.单词部分 ①alert警告②prompt提示③parentNode父节点④childNode子节点⑤firstChild第一个子节点 ⑥lastChild最后一个子节点⑦nextSibling下一个同级⑧previousSibling上一个同级 ⑨createElement创建节点元素    appendChild附加节点    insertBefore在..之前添加 cloneNode复制 节

accp8.0转换教材第2章初识Mysql

首先安装MySQL: 一.单词部分: ①networking网络②option选择③port端口④firewall防火墙⑤engine引擎 ⑥standard标准⑦character字符⑧collation校对⑨stirage存储 create 创建     drop 删除   comment 评论  variables变量 二.预习部分 1.请写出创建和删除数据库的sql语句 CREATE DATABASE 数据库名; DROP DATABASE 数据库名; 2.写出创建和删除表的sql语句

accp8.0转换教材第8章JavaScript对象及初识面向对象理解与练习

JavaScript数据类型,对象,构造函数,原型对象,初识原型链,对象继承 一.单词部分 ①object父类②constructor构造函数③instance实例④call调用 ⑤apply应用⑥combination组合⑦inheritance继承 二.预习部分 1.简述创建对象的两种方法,以及两者的区别 new  和  字面量赋值 前者要用点.添加属性和方法 后者直接调用 2.简述使用构造函数创建实例的步骤 ①创建一个新对象 ②将构造函数的作用域赋值给新对象 ③执行构造函数代码块 ④返回新

锋利的jQuery读书笔记 第6章、第9章 第10章

第六章 Ajax 全称为:“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),它并不是 JavaScript 的一种单一技术,而是利用了一系列交互式网页应用相关的技术所形成的结合体.使用 Ajax,我们可以无刷新状态更新页面,并且实现异步提交,提升了用户体验. 一.Ajax的优势和不足 (1)优势主要以下几点: 1.不需要插件支持(一般浏览器且默认开启 JavaScript 即可) 2.用户体验极佳(不刷新页面即可获取可更新的数据) 3.

SQL Server2012 T-SQL基础教程--读书笔记（8 - 10章）

SQL Server2012 T-SQL基础教程--读书笔记(8 - 10章) 示例数据库:点我 CHAPTER 08 数据修改 8.1 插入数据 8.1.1 INSERT VALUES 语句 8.1.2 INSERT SELECT 语句 8.1.3 INSERT EXEC 语句 8.1.4 SELECT INTO 语句 8.1.5 BULK INSERT 语句 8.1.6 标识列属性和序列对象 8.1.6.1 标识列属性 8.1.6.2 序列对象 8.2 删除数据 8.2.1 DELETE 语

&lt;&lt;Python基础教程&gt;&gt;学习笔记 | 第10章 | 充电时刻

第10章 | 充电时刻 本章主要介绍模块及其工作机制 ------ 模块 >>> import math >>> math.sin(0) 0.0 模块是程序 一个简单的模块 #hello.py print ("Hello,World!") >>> import hello Traceback (most recent call last): File "<pyshell#56>", line 1, i