Ajax详解
一:什么是Ajax
Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml。也就是异步请求更新技术。Ajax是一种对现有技术的一种新的应用,不是一门新语言。它是用JavaScript编写。与xml的关系就是可以读取和返回xml文件。
二:Ajax中的对象和方法说明
Ajax的核心对象就是xmlHttpRequest
XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
1:方法
xmlHttpRequst对象利用send()和open()方法与服务器进行交互。
open(method,url,async)
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置
- async:true(异步)或 false(同步)
send(string)
- string:仅用于 POST 请求
如果是post请求,必须使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中设置发送的数据:
[javascript] view plaincopy
- xmlhttp.open("POST","ajax_test.asp",true);
- xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
- xmlhttp.send("fname=Bill&lname=Gates");
2 :属性
readyState
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成,且响应已就绪
State
- 200: "OK"
- 404: 未找到页面
responseText
- 获得字符串形式的响应数据。
responseXML
- 获得 XML 形式的响应数据。
onreadystatechange
- 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
三:Ajax运行原理(为什么要用Ajax)
ajax通过xmlhttpRequest对象执行操作,其中xmlhttpRequest对象是在浏览器中内置的一个对象
其运行原理就相当于创建了一个请求代理,通过代理去完成与服务器的交互,交互的过程中客户不需要等待,还可以进行其它的工作,交互完成以后,代理再将交互的结果返回给客户页面。
第一步:创建xmlHttpRequest对象,每个浏览器的创建不是都相同。
[javascript] view plaincopy
var xmlhttp;
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari创建方式
xmlhttp=new XMLHttpRequest();
}
else
{// IE6, IE5 创建方式
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
通常情况下为了兼容所有浏览器,每个都要写上。
第二步:设置open()方法和setRequestHeader()方法参数。
将请求方式,请求目的地址,和请求类型设置到open方法中,如果是post请求,则需要设置setRequestHeader()参数
第三步:发送执行
利用send方法,与服务器真正的交互执行
第四步:获得执行结果
首先判断执行是否完成,然后通过js操作dom元素,将返回的responseText返回到页面
[javascript] view plaincopy
xmlhttp.onreadystatechange=function()
{
//判断是否发送成功,是否找到请求页面等
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//操作页面元素
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
四:Ajax实例(焦点离开验证用户是否存在)
利用ajax在焦点离开的时候判断注册的用户是否存在
[javascript] view plaincopy
var xmlHttp;//声明xmlHttp对象
//实例化xmlHttpRequest对象
function createXMLHttpRequest() {
//表示当前浏览器不是ie,如ns,firefox
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
//input失去焦点事件onblur(),调用这个js方法验证
function validate(field) {
if (trim(field.value).length != 0) {
//创建XMLHttpRequest
createXMLHttpRequest();
//每次请求的url地址不同,利用时间产生不同url地址,可以防止缓冲造成问题
var url = "user_validate.jsp?userId=" + trim(field.value) + "×tamp=" + new Date().getTime();
xmlHttp.open("GET", url, true);
//方法地址,处理完成后自动调用,回调
xmlHttp.onreadystatechange=function() { //匿名函数
if(xmlHttp.readyState == 4) { //Ajax引擎初始化成功
if (xmlHttp.status == 200) { //http协议成功
document.getElementById("userIdSpan").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
}else {
alert("请求失败,错误码=" + xmlHttp.status);
}
}
};
//将参数发送到Ajax引擎
xmlHttp.send(null);
}else {
document.getElementById("userIdSpan").innerHTML = "";
}
}
页面部分代码:
[html] view plaincopy
<td width="78%">
<input name="userId" type="text" class="text1" id="userId"
size="10" maxlength="10" onkeypress="userIdOnKeyPress()" value="<%=userId %>" onblur="validate(this)"><span id="userIdSpan"></span>
</td>
//后台验证方法利用jsp编写
[java] view plaincopy
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<%@ page import="com.bjpowernode.drp.sysmgr.manager.*" %>
<%
//可以采用清除缓存的方法,如下
//response.setContentType("text/xml");
//response.setHeader("Cache-Control", "no-store"); //HTTP1.1
//response.setHeader("Pragma", "no-cache"); //HTTP1.0
//response.setDateHeader("Expires", 0);
//out.println("Hello");
//Thread.currentThread().sleep(3000);
String userId = request.getParameter("userId");
if (UserManager.getInstance().findUserById(userId) != null) {
out.println("用户代码已经存在");
}
%
- Javascript:模仿淘宝的信用评价
- 好米有好价! 两枚4字母域名均以五位数交易
- Docker容器学习梳理--Volume数据卷使用
- 菜单常用:复位全部并设置某个项的样式
- Mysql更换MyISAM存储引擎为Innodb的操作记录
- 比特币分叉倒计时,糖果福利又来了
- 执行git push出现"Everything up-to-date"
- linux下EOF写法梳理
- 用AngularJS来实现异步数据的购物车功能设计
- span不如div的地方
- 分布式监控系统Zabbix--完整安装记录(7)-使用percona监控MySQL
- 10x Python开发者必读:本月Python文章TOP 10
- Linux下更换默认yum源为网易yum源的操作记录
- yum源使用的几个报错小总结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- keras K.function获取某层的输出操作
- 浅谈sklearn中predict与predict_proba区别
- 解决Keras中循环使用K.ctc_decode内存不释放的问题
- PDO::getAvailableDrivers讲解
- PDO::_construct讲解
- Yii2.0实现的批量更新及批量插入功能示例
- PDO::inTransaction讲解
- 小程序前后端交互使用JWT
- python文件操作seek()偏移量,读取指正到指定位置操作
- 使用OpenCV去除面积较小的连通域
- 使用vs code编辑调试php配置的方法
- Python OpenCV去除字母后面的杂线操作
- PDO::rollBack讲解
- PyTorch的torch.cat用法
- keras在构建LSTM模型时对变长序列的处理操作