Ajax的初级使用
一、AJAX简介（本文的例子都使用的是原生的ajax）
老技术新用法
二、异步和同步区别
三、XMLHttpRequest对象（面试题）
属性：
readyState:
0：未初始化
1：open方法已经调用了
2：send方法已经调用了
3：接收到了响应消息头，但没有接收到正文
4：接收到了响应正文。响应结束
responseText：只读的。返回的是String
作用：接收服务器返回的文本类型的正文数据。
responseXML：只读的。返回的是Document对象（JS中文档模型）
作用：接收服务器返回的XML类型的正文数据。
status：只读的。返回的是short
作用：接收服务器返回的响应状态码
statusText：只读的。返回的是String
作用：接收服务器返回的响应吗描述
方法：
l open(String method,String url,boolean async):建立与服务器的链接。
method：请求方式。GET|POST
url：请求的服务器地址。
async：是否是异步。true是异步的。默认就是true。
l send(String data):发出请求。data参数是请求正文的内容数据。
l setRequestHeader(String headerName,String headerValue):设置请求消息头。
l getAllResponseHeaders():返回所有的响应消息头。是一个String字符串。
l getResponseHeader(headerName):返回指定头的值。是一个String字符串。
事件处理器：onreadystatechange:执向一个函数。XMLHttpRequest对象的readyState的每次变化都会触发onreadystatechange指向的事件处理器。
四、GET和POST请求的发送
五、服务器端返回的数据类型：
XML: 返回的是xml对象
JSON:返回的是文本类型，需要转换
编码步骤：
function getXHR() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
return xmlHttp;
}
util.js
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>AJAX的编码步骤：测试异步交互是可行的</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="${pageContext.request.contextPath}/util.js"></script>
<script type="text/javascript">
window.onload=function(){
//window.onload是一个事件，当文档加载完成之后触发该事件
document.getElementById("bt1").onclick=function(){
//发出异步请求：步骤 //1、得到xhr（XMLHttpRequest）对象
var xhr = getXHR();
//2、注册状态变化监听器
xhr.onreadystatechange=function(){
//做出具体的处理
if(xhr.readyState==4){//接收到了响应正文。响应结束
if(xhr.status==200){//200:服务器成功返回页面
alert("服务器已经响应结束了，去看看吧");
}
}
}
//3、建立与服务器的链接
//如果访问的地址相同，浏览器就不会真正的发出请求 ?time="+new Date().getTime()
xhr.open("GET","${pageContext.request.contextPath}/servlet/ServletDemo1?time=");
//4、向服务器发出请求
xhr.send(null);//没有正文
}
}
</script>
</head> <body>
<input id="bt1" type="button" value="点我呀"/>
<%--
不论type是什么类型，只要单击鼠标就会执行，window.load=function事件
--%>
</body>
</html>
一个验证用户名是否存在例子：（理解POST和GET提交时send方法传值的区别）
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>检测用户名是否可用</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" src="${pageContext.request.contextPath}/util.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
window.onload=function(){
document.getElementById("username").onblur=function(){//失去焦点
if(this.value==""){
alert("请输入用户名");
this.focus();//恢复焦点
return;
}
//发出异步请求
var xhr = getXHR();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){ document.getElementById("msg").innerHTML=xhr.responseText;
//responseText接收服务器返回的文本类型的正文数据。
//放到名为msg的span(属于一个行内元素)中
}
}
}
/*GET提交时，在send中传值是不起作用的；
xhr.open("GET","${pageContext.request.contextPath}/servlet/ServletDemo2?username="+this.value+"&time="+new Date().getTime());
xhr.send(null);
*/ //
xhr.open("POST","${pageContext.request.contextPath}/servlet/ServletDemo2?time="+new Date().getTime());
//设置请求消息头：告知客户端提交的正文的MIME类型
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+this.value);
}
}
</script>
</head> <body>
<form action="" method="post">
用户名：<input type="text" id="username" name="username"/><span id="msg"></span><br/>
密码:<input type="password" id="password" name="password"/><br/>
<input type="submit" value="注册"/>
</form>
</body>
</html>
页面
package com.itheima.servlet; 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 ServletDemo2 extends HttpServlet {
private String usernames[] = {"admin","wzhting"};//预先存在的用户名，也可连接数据库取；此处只是为了说明ajax做了简化处理 public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String username = request.getParameter("username");
boolean b = false;//是否可用
for(String s:usernames){
if(s.equals(username)){
b = true;
break;
}
} response.setContentType("text/html;charset=UTF-8");
if(b){
response.getWriter().write("<font color='red'>用户名不可用</font>");
}else{
response.getWriter().write("<font color='green'>用户可用</font>");
} } public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
} }
ServletDemo2
一个理解（利用jsp页面返回数据）例子：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>显示所有的商品</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" src="${pageContext.request.contextPath}/util.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
.odd{
background-color: #c3f3c3;
}
.even{
background-color: #f3c3f3;
}
</style>
<script type="text/javascript">
var flag = false;
window.onload=function(){
document.getElementById("bt1").onclick=function(){
//发出异步请求
var xhr = getXHR();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
if (flag == false) {
document.getElementById("d1").innerHTML=xhr.responseText;// 文本类型 text/*
flag = true;
} else {
document.getElementById("d1").innerHTML="";
flag = false;
}
}
}
}
xhr.open("GET","${pageContext.request.contextPath}/servlet/ServletDemo3?time="+new Date().getTime());
xhr.send(null);
}
}
</script>
</head> <body>
<input type="button" id="bt1" value="显示商品"/>
<hr/>
<div id="d1"></div>
</body>
</html>
主页面
package com.itheima.servlet; import java.io.IOException;
import java.util.ArrayList;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import com.itheima.domain.Product; public class ServletDemo3 extends HttpServlet {
private List<Product> products = new ArrayList<Product>();
public void init() throws ServletException {
products.add(new Product(1, "充气筒", 20));
products.add(new Product(2, "三国杀", 10));
products.add(new Product(3, "扑克", 10));
products.add(new Product(4, "洗衣粉", 10));
products.add(new Product(5, "肥皂", 7));
} public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setAttribute("products", products);
request.getRequestDispatcher("/listProducts.jsp").forward(request, response);
//jsp页面因为是先编译成servlet在运行的，而servlet中的jsp页面就变成了如下形式的代码
//out.write("<html>\r\n");
//所以response的是整个jsp页面
} public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
} }
ServletDemo3
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>title</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
--> </head> <body>
<table border="1" width="438">
<tr>
<th>编号</th><%-- th比表示标题的一格，会自动加黑加粗 --%>
<th>名称</th>
<th>单价</th>
</tr>
<c:forEach items="${products}" var="p" varStatus="vs">
<tr class="${vs.index%2==0?'odd':'even' }">
<td>${p.id}</td>
<td>${p.name}</td>
<td>${p.price}</td>
</tr>
</c:forEach>
</table>
</body>
</html>
返回数据的jsp页面
结果表明：jsp页面因为是先编译成servlet再运行的，故jsp页面会变成了如下形式的代码:
out.write("<html>\r\n");
out.write("\t<head>\r\n");
out.write("\t\t<title>title</title>\r\n");
out.write("\t</head>\r\n");
out.write("\t<bodystyle=\"background-color:lightblue\">\r\n");
out.write("\r\n");
……
//所以jsp页面可以返还给xhr.responseText；即使servlet中没有response.getWriter().write("……");
Ajax的初级使用的更多相关文章
- ajax 原理----初级篇
一.贴dome,ajax三大步 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- AJAX技术初级探索
一 概念 Ajax技术能够实现页面以异步方式从服务器获取信息,无需刷新页面 Ajax的核心技术是XMLHttpRequest对象(XHR) 异步实际就是请求数据的代码不会阻塞页面向下执行 二 原生Aj ...
- mui初级入门教程（三）— html5+ XMLHttpRequest 与mui ajax用法详解
文章来源:小青年原创发布时间:2016-05-29关键词:mui,html5+,XMLHttpRequest,ajax,懒加载转载需标注本文原始地址: http://zhaomenghuan.gith ...
- jquery接触初级-----ajax 之：jquery_ajax 方法
1. $.get() 方法: 格式:$.get( url,[,data],[,callback],[,type] ); data: 采用键值对的方式存储于对象中; callback: 载入成功时(当 ...
- jquery接触初级-----ajax 之：load()方法
jquery _ajax 请求主要有几种方式:load(),$.get(),$.post(),$.ajax(),$.getScript(),$.getJson() 1.load()方法 格式:load ...
- ajax初级知识（转载）
1.什么是ajax? Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 2.ajax需要什么基础? HTML 用于建立 Web 表单并确定应 ...
- 最初级的ajax程序
该文章实现的ajax功能是实现了在<span>上面添加内容 jsp代码 <html><head><title>Ajax</title>< ...
- Web前端初级问题—ajax登录跳转登录实现
当我们的用户进行系统登录时,用户名和密码的验证都是后端验证的.而且,用户登录状态也是要后端设置的,查询数据库后,用户名和密码正确,则在session中存储一个uuid,每个页面需要根据登录状态判断展示 ...
- 新浪博客：html+css+原生JS+Ajax初级+mySql数据库——源码
**************************************************************************************************** ...
随机推荐
- 两种 js下载文件的方法(转)
function DownURL(strRemoteURL, strLocalURL){ try{ var xmlHTTP = new ActiveXObjec ...
- scrapy的入门使用（二）
1. scrapy实现翻页请求 找到下一页的url地址 构造url地址的请求,传递给引擎 1.1 实现翻页请求 使用方法 在获取到url地址之后,可以通过scrapy.Request(url,call ...
- 用mplayer从视频中按周期提取帧
使用方法:extract file time step folder time 设置时间长度 step 设置周期 均以秒(s)为单位 贡献:1. 从视频文件中周期性提取图片:2. Windows下批处 ...
- Ubuntu里Eclipse关联Jdk
Ubuntu里Eclipse关联Jdk 1.在Eclipse安装目录创建jre 文件. 2.ln -s jdk目录/bin bin 输入上述命令,之后eclipse即可打开.
- repo 用法
repo的用法(zz) 注:repo只是google用Python脚本写的调用git的一个脚本,主要是用来下载.管理Android项目的软件仓库.(也就是说,他是用来管理给git管理的一个个仓库的) ...
- spring boot 入门及示例
需要环境:eclipse4.7.3 + jdk1.8 +maven3.6.1 + tomcat(web需要) spring boot官网介绍:https://spring.io/guides/gs/s ...
- email program （客户端）演变过程有感
以下内容全部为个人读后感(参考百度百科的相关资料) 首先我认为电子邮件是一个非常伟大的发明,它不仅成本低,而且传输效率快! 关于它的起源,我从百度百科中看到了两种说法 1.1969年10月世界 ...
- 【腾讯Bugly干货分享】人人都可以做深度学习应用：入门篇
导语 2016年,继虚拟现实(VR)之后,人工智能(AI)的概念全面进入大众的视野.谷歌,微软,IBM等科技巨头纷纷重点布局,AI 貌似将成为互联网的下一个风口. 很多开发同学,对人工智能非常感兴趣, ...
- rem计算
//jquery实现 // $(function(){ // $(window).on("resize",function(){ // var width=$(window).wi ...
- Mybatis框架五：动态SQL
1.if where 实现一个简单的需求: 根据性别和名字查询用户: 正常来写: <select id="selectUserBySexAndUsername" para ...