ajax发送异步请求
一：得到XMLHttpRequest对象
ajax其实只需要学习XMLHttpRequest一个对象
大多数浏览器都支持：
var xmlHttp = new XMLHttprequest();
IE 6.0:
var mltHttp = new ActiveXObject("Msxml2.XMLHTTP");
IE 5.5 及更早的IE
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
* 编写创建XMLHttpRequest对象函数
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();
}catch(e){
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject(Microsoft.XMLHTTP');
}catch(e){
throw e；
}
}
}
}
二：打开与服务器的链接
xmlHttp.open()用来打开与服务器的链接
参数：请求方式，请求URL，请求是否为异步
xmlHttp.oprn("GET","/AServlet",true);
三：发送请求
xmlHttp.send(null);//如果不写null可能导致部分浏览器无法使用
GET请求必须写null
四：
要在xmlHttp对象的一个事件上注册监听器：onreadystatechange
得到xmlHttp对象的状态：
var state = xmlHttp.readyState;//可能是0、1、2、3、4
得到服务器响应的状态码
var status = xmlHttp.status;//例如200、404、500
得到服务器响应的内容
var content = xmlHttp.responseText;//得到服务器响应的文本格式的内容
var content = xmlHttp.responseXML;//得到服务器响应的XML响应内容，它是Document对象了
xmlHttp.onreadystatechange = function(){//xmlHttp的5种状态都会调用本方法
if(xmlHttp.readyState ==4 && xmlHttp.status ==200){//双重判断，既要响应成功，又要服务器响应结束
//获取服务器响应的内容
var text = xmlHttp.responseText;
}
};
五：POST(如果发送请求时带有参数，一般使用POST请求）
open :
xmlHttp.open("POST");
添加一步：设置Content-Type请求头
xmlHttp.setRequestHeander("Content-Type","application/x-www-form-urlencoded");
send:
xmlHttp.send("username=xxx&password=xxx");
jsp
<%--
Created by IntelliJ IDEA.
User: YuWenHui
Date: 2017/4/20 0020
Time: 19:12
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>AJAX</title>
<script type="text/javascript">
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();
}catch (e){
try {
return new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try {
return new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
throw e;
}
}
}
}
window.onload = function () {
var username = document.getElementById("username");
username.onblur=function () {
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("POST","<c:url value='/ValidateUsenameServlet'/> ",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("username="+username.value);
xmlHttp.onreadystatechange=function () {
if(xmlHttp.readyState==4 && xmlHttp.status ==200){
var span = document.getElementById("errorSpan");
if(xmlHttp.responseText == 1){
span.innerHTML="该用户名已被注册";
}else {
span.innerHTML="";
}
}
}
}
}
</script>
</head>
<body>
<h1>测试用户名是否被注册</h1>
<form action="" method="post">
用户名：<input type="text" name="username" ><span name="errorSpan"></span><br/>
密 码：<input type="password" name="password"><br>
<input type="submit" value="登陆">
</form>
</body>
</html>
sevlet
package servlet; import java.io.IOException; /**
* Created by YuWenHui on 2017/4/20 0020.
*/
public class ValidateUsenameServlet extends javax.servlet.http.HttpServlet {
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
String name = request.getParameter("username");
if ("yuwenhui".equalsIgnoreCase(name) || "余文辉".equalsIgnoreCase(name)){
response.getWriter().print("1");
}else {
response.getWriter().print("0");
}
}
}
ajax发送异步请求的更多相关文章
- AJAX的来龙去脉（由来）-如何被封装出来的--ajax发送异步请求（四步操作）
<黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...
- AJAX发送异步请求教程详解
AJAX 一.AJAX简介 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可 ...
- JQ+AJAX 发送异步请求
1. load() ; 作用:通过ajax 请求从服务器加载数据,并添加到符合要求的节点上 用法:$node.load(请求地址,请求参数) 请求参数写法: --"username=admi ...
- Ajax发送异步请求（四步操作）
1.第一步(得到XMLHttpRequest) *ajax其实只需要学习一个对象:XMLHttpRequest,如果掌握了它,就掌握了ajax!! *得到XMLHttpRequest >大多数浏 ...
- 使用AJAX技术发送异步请求，HTTP服务端推送
使用AJAX技术发送异步请求 什么是AJAX AJAX指一步Javascript和XML(Asynchronous JavaScript And XML),它是一些列技术的组合,简单来说AJAX基于X ...
- 16 react 发送异步请求获取数据 和 使用Redux-thunk中间件进行 ajax 请求发送
1.发送异步请求获取数据 1.引入 axios ( 使用 yarn add axios 进行安装 ) import axios from 'axios'; 2. 模拟 在元素完成挂载后加载数据 并初始 ...
- Ajax发送POST请求SpringMVC页面跳转失败
问题描述:因为使用的是SpringMVC框架,所以想使用ModelAndView进行页面跳转.思路是发送POST请求,然后controller层中直接返回相应ModelAndView,但是这种方法不可 ...
- 掌握 Ajax，第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
- MVC的Ajax的异步请求
MVC的Ajax的异步请求 在这里小写一下MVC的异步请求的一点小总结. 个人认为是有两种的,一种就是跟webform一样的,依旧是使用jQuery的$.get()方法,只是请求地址不同,webfor ...
随机推荐
- UIBeaierPath 与 CAShapeLayer
CAShapeLayer是基于贝塞尔曲线而存在的, 如果没有贝塞尔曲线提供路径来画出图形, CAShapeLayer就没有存在的意义, CAShapeLayer可以使得不用在 drawRect:方 ...
- 九度OJ题目1076：N的阶乘 (java)运用BigInteger的例子。
题目描述: 输入一个正整数N,输出N的阶乘. 输入: 正整数N(0<=N<=1000) 输出: 输入可能包括多组数据,对于每一组输入数据,输出N的阶乘 样例输入: 4 5 15 样例输出: ...
- android-自定义广告轮播Banner（无限循环实现）
关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户& ...
- 修改Delphi 10.1.2 edit控件在android的复制、剪切和粘贴样式
Delphi 10.1.2 edit控件在android默认的复制.剪切和粘贴样式太丑,经悟能-DelphiTeacher的提示,用最简单的代码修改后稍有改观. 默认的样式: 修改后的样式: 修改FM ...
- php流程管理练习
今天我们做一个流程管理: 1.流程管理的用法是什么样的? 2.怎么发起想要的流程? 3.审批的人要是怎么审批通过? 4.流程审核是不是要挨个走过? 一. 做这个流程管理肯定要有数据库: 二.数据库结束 ...
- Hive 伪分布式下安装
本安装过程只作为个人笔记用,非标准教程,请酌情COPY.:-D Hive下载 下载之前,需先查看兼容的Hadoop版本,并安装hadoop,参考 http://www.cnblogs.com/yong ...
- 基于Intranet的零件库管理信息系统设计--part01
好吧,临近毕业的我,毕业设计还没开始做呢.时间不等人,再过两个月就要答辩了,我得开始做我的毕设了,虽然我现在还没能力完全把毕设做出来,但总得先迈出第一步吧.今天先做一小部分. 话不多说,先来看我得毕业 ...
- 【G】开源的分布式部署解决方案文档 - 使用手册
G.系列导航 [G]开源的分布式部署解决方案 - 导航 已知问题 导航没有联动 因为权限只是做了基础的登录校验,考虑到后面导航要跟权限关联上暂时是写死的. 只有部分界面使用了Vue.js 因为刚开始没 ...
- JDBC调用存储过程的例子
下面是我学到了Oracle存储过程,在这里跟大家简单的分享一下利用JDBC调用存储过程的例子: 废话就不啰嗦,现在就直接上机代码. 首先我利用的是Oracle中默认的 scott 数据库里的 emp员 ...
- 【iOS】7.4 定位服务->3.1 地图框架MapKit 功能1：地图展示
> 本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. --- > 本文相关目录: ================== 所属文集:[[ ...