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数据库——源码
**************************************************************************************************** ...
随机推荐
- Javascript Engine, Java VM, Python interpreter, PyPy – a glance
提要: url anchor (ajax) => javascript engine (1~4 articles) => java VM vs. python interpreter =& ...
- Shader_ShaderForge_NGUI_序列帧/
序列帧 Shader篇 Shader Forge序列帧算法! 附上Shader代码部分: // Shader created with Shader Forge v1.26 // Shader For ...
- MAC OS 更新GIT版本时遇到的问题
在更新git版本时,没有备份就删掉了原先的版本,在安装完2.18.0的新版本后,使用命令行git --version,返回错误git not a developer tool or in PATH. ...
- 华为SSH认证配置
[设备型号]华为switch-S5700s ————1: [SW1] rsa/dsa local-key-pair create #创建本地密钥对 The key name will be: SW1_ ...
- bash基础特性1
shell俗称壳(用来区别于内核),是指“提供使用者使用界面”的软件,就是一个命令行解释器. BASH是SHELL的一种,是大多数LINUX发行版默认的SHELL,除BASH SHELL外还有C SH ...
- Java基础知识提要
1. 简述Java的基本历史 java起源于SUN公司的一个GREEN的项目,其原先目的是:为家用消费电子产品发送一个信息的分布式代码系统,通过发送信息控制电视机.冰箱等 2. 简单写出Java特 ...
- 【CSS/JS】如何实现单行／多行文本溢出的省略（...）--老司机绕过坑道的正确姿势
写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本: 这个文本可能是单行的: 也可能是多行的: 下面我就给大家展示如何简单或优雅地实 ...
- 两种经典电商CSS布局
圣杯布局和双飞翼布局! 两种布局功能相同,都是为了实现两端宽度固定,中间宽度自适应的三栏布局 圣杯布局: 三个区域都处于左浮动状态,并使main的宽度成父容器的100% 为两侧侧边栏添加负margin ...
- Android 视频播放器 (二)：使用MediaPlayer播放视频
在 Android 视频播放器 (一):使用VideoView播放视频 我们讲了一下如何使用VideoView播放视频,了解了基本的播放器的一些知识和内容.也知道VideoView内部封装的就是Med ...
- LSTM和GRU
LSTM和GRU LSTM 忽略偏置: \[\begin{align} i_t&=\sigma(x_t\cdot W_i+h_{t-1}\cdot U_i)\\ f_t&=\sigma ...