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数据库——源码
**************************************************************************************************** ...
随机推荐
- linux系统中使用socket直接发送ARP数据
这个重点是如这样创建socket: sock_send = socket ( PF_PACKET , SOCK_PACKET , htons ( ETH_P_ARP) ) ; 其后所有收发的数据都是 ...
- prim算法和克鲁斯卡尔算法
Prim 设图G=(V,E)是一个具有n个顶点的连通网,其生成树的顶点集合为U.首先把v0放入U,再在所有的u∈U,v∈V-U的边(u,v)∈E中找一条最小权值的边,加入生成树,并把该边的v加入U集合 ...
- 文本超过控件长度自动显示省略号的css
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
- jQuery-实现图片轮播
html部分: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <ti ...
- c++ 实现hashmap
由于hashmap不是c++ stl中标准实现,这样在跨平台使用时就可能会出现问题,于是想到自己实现一个hashmap hash算法使用开链法解决hash冲突,主要实现了添加,删除,查找几个方法 头文 ...
- 盘点和反思在微信的阴影下艰难求生的移动端IM应用
本文原作者:李越,由银杏财经原创发布,本次内容改动. 1.前言 上线一周完成1.5亿元融资,上线10天总激活用户数超400万,8月29日单日新增用户超100万,这是子弹短信交出的最新成绩单(详见< ...
- Visual Studio 开发（二）：VS 2017配置FFmpeg开发环境
在上篇文章Visual Studio 开发(一):安装配置Visual Studio Code 中,我们讲了一下如何配置VS CODE,来编写和调试C的代码.如果你已经使用VS Code回顾和复习好C ...
- Java核心技术卷一基础知识-第5章-继承-读书笔记
第5章 继承 本章内容: * 类.超类和子类 * Object:所有类的超类 * 泛型数组列表 * 对象包装器和自动装箱 * 参数数量可变的方法 * 枚举类 * 反射 * 继承设计的技巧 利用继承,人 ...
- JavaScript实现input输入框限制输入值的功能
限制只能输入正整数 <input type="text" onkeyup="if(this.value.length==1){this.value=this.val ...
- 微信小程序我的界面
前言 感谢! 承蒙关照~ 微信小程序我的界面 界面效果: 界面结构: 小程序代码: 我们先看me.json代码 { "navigationBarTitleText": " ...