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）

</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("22@qq.com".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()方法实现异步检查注册邮箱是否已存在

</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>

//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>
<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 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理解与练习的更多相关文章

accp8.0转换教材第11章JAjax加护扩展理解与练习
①杂记:前面有原生态JavaScript实现ajax这里又多了更简单的方法实现ajax ②$.get()方法的常用参数参数类型说明 url String 必选,规定发送地址 data Plain ...
accp8.0转换教材第1章多线程理解与练习
一.单词部分: ①process进程 ②current当前的③thread线程④runnable可获取的 ⑤interrupt中断⑥join加入⑦yield产生⑧synchronize同时发生二.预 ...
accp8.0转换教材第9章JQuery相关知识理解与练习
自定义动画一.单词部分: ①animate动画②remove移除③validity有效性 ④required匹配⑤pattern模式二.预习部分 1.简述JavaScript事件和jquery事件 ...
accp8.0转换教材第6章连接MySQL理解与练习
JDBC_ODBC,纯java方式连接mysql 1.单词部分 ①JDBCjava连接数据库②driver manager驱动③connection连接④statement声明 ⑤execute执行⑥ ...
accp8.0转换教材第4章MySQL高级查询(二)理解与练习
知识点:EXISTS子查询.NOT EXISTS子查询.分页查询.UNION联合查询一.单词部分 ①exist存在②temp临时的③district区域 ④content内容⑤temporary暂时 ...
accp8.0转换教材第3章MySQL高级查询(一)理解与练习
一.单词部分 ①constraint约束②foreign外键③references参考 ④subquery子查询⑤inner内部的⑥join连接二.预习部分 1.修改表SQL语句的关键字是什么 RE ...
accp8.0转换教材第8章JavaScript对象及初识面向对象理解与练习
JavaScript数据类型,对象,构造函数,原型对象,初识原型链,对象继承一.单词部分 ①object父类②constructor构造函数③instance实例④call调用 ⑤apply应用⑥c ...
accp8.0转换教材第7章JavaScript操作DOM对象理解与练习
程序调试,chrome开发人员工具,DOM操作,节点和节点间的关系,节点信息,操作节点,获取元素一.单词部分 ①alert警告②prompt提示③parentNode父节点④childNode子节点 ...
accp8.0转换教材第5章事务、视图、索引、备份和恢复理解与练习
知识点:事务.视图.索引.数据库的备份和恢复一.单词部分 ①transation事务②atomicity原子性③consistency一致性④isolation隔离性 ⑤durability持久性⑥ ...

随机推荐

【转】纯手工玩转 Nginx 日志
Nginx 日志对于大部分人来说是个未被发掘的宝藏,总结之前做某日志分析系统的经验,和大家分享一下 Nginx 日志的纯手工分析方式. Nginx 日志相关配置有 2 个地方:access_log 和 ...
[Open Source] RabbitMQ 高可用集群方案
简介 RabbitMQ是用erlang开发的,集群非常方便,因为erlang天生就是一门分布式语言,但其本身并不支持负载均衡. Rabbit模式大概分为以下三种:单一模式.普通模式.镜像模式 Rabb ...
谈一谈Java8的函数式编程（二） --Java8中的流
流与集合众所周知,日常开发与操作中涉及到集合的操作相当频繁,而java中对于集合的操作又是相当麻烦.这里你可能就有疑问了,我感觉平常开发的时候操作集合时不麻烦呀?那下面我们从一个例子说起. 计 ...
javaWeb学习总结（10）- Filter(过滤器)学习
一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有 web资源:例如Jsp, Servlet, 静 ...
String为值类型还是引用类型
关于String为值类型还是引用类型的讨论一直没有平息,最近一直在研究性能方面的问题,今天再次将此问题进行一次明确.希望能给大家带来点帮助. 如果有错误请指出. 来看下面例子: //值类型 int a ...
Zxing 的集成 ---- Maven 对应 Gradle 的写法
Zxing 的集成 ---- Maven 对应 Gradle 的写法刚刚想耍耍二维码,想到了zxing和zbar,又想到zxing是Google老爹的,想想就算了吧,虽然zbar快但是识别错误率也高 ...
开源解析库 - JSON
Json及其实现 JSON作为一种轻量级的数据交换格式,多被用于跨语言通信(比如CPP与PHP之间的数据交互). 至于何为JSON,其详细解释参考官网. 既然是一种格式,那便必然有相应的编码实现.在 ...
[HDU1004] Let the balloon rise - 让气球升起来
Problem Description Contest time again! How excited it is to see balloons floating around. But to te ...
安卓ios和angularjs相互调用解决首次调用ios传递标题失败的问题
1.angular 调用客户端方法放在 try catch中 try { js_invoke.showShareDialog(angular.toJson(obj)); // 在这里放客户端的方法即 ...
java中File类中list（）和listFiles（）方法区别
list()和listFiles()方法区别: 1.返回值类型不同:前者为String数组,后者为File对象数组 2.数组中元素内容不同:前者为string类型的[文件名](包含后缀名),后者为Fi ...

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

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

随机推荐

热门专题