AJAX 入门
1. 同步交互与异步交互
1.1 同步交互
- 客户端发送一个请求, 需要等待服务器的响应结束,才能发送第二个请求!
- 刷新的是整个页面.
1.2 异步交互
- 客户端发送一个请求,无需等待服务器的响应,然后就可以发送第二个请求!
- 可以使用 js 接收服务器的响应,然后使用 js 来局部刷新.
2. AJAX 概述
- AJAX: ansynchronous javascript and xml, 异步的 js 和 xml;
- 它能使用 js 访问服务器,而且是异步访问!
- 通常服务器给客户端响应的是一个完整的 html 页面!但在 ajax 中因为是局部刷新,那么服务器就不用
再响应整个页面,而只是数据,其中的数据格式包括:- text: 纯文本;
- xml
- json: js 提供的数据交换模式.
3. ajax 的优缺点
3.1 优点:
- 异步交互: 增强了用户体验!
- 性能: 因为服务器无需再响应整个页面, 只需要响应部分内容,所以服务器的压力减轻了.
3.2 缺点
- ajax 不能应用在所有场景;
- ajax 无端增多了对服务器的访问次数,给服务器带来了压力.
4. ajax 发送异步请求(四步操作)
第一步,得到 XMLHttpRequest 对象
- 大多数浏览器都支持:
var xmlHttp = new XMLHttpRequest(); - IE 6.0 :
var xmlHttp = 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(): 用来打开与服务器的连接, 它需要三个参数:- 请求方式: GET 或 POST;
- 请求的 URL: 指定服务器端的资源, 例如:
/day23_1/AServlet; - 请求是否为异步: 如果为 true,表示发送异步请求, 否则为同步请求!
- 示例:
xmlHttp.open("GET","/day23_1/AServlet",true);
第三步, 发送请求
xmlHttp.send(null): 必须带参数 null, 如果不给参数, 可能会造成 FireFox 浏览器无法发送!- 参数: 就是请求体的内容. 如果是 GET 请求,没有请求体,但必须给出 null.
第四步, 接收响应
- 在 xmlHttp 对象的一个事件上注册监听器:
onreadystatechange. - xmlHttp 对象一共有五种状态:
- 0: 初始化未完成状态,只是创建了 XMLHttpRequest 对象,还未调用 open() 方法;
- 1: 请求已开始, open()方法已调用, 但还没调用 send() 方法;
- 2: 请求发送完成状态, send() 方法已调用;
- 3: 服务器已经开始响应, 但不表示响应结束了;
- 4: 服务器响应结束.(通常我们只关心这个状态!!!)
//得到 xmlHttp 对象的状态, 可能结果: 0, 1, 2, 3, 4
var state = xmlHttp.readyState;
// 得到服务器响应的状态码, 可能结果: 200, 404, 500
var status = xmlHttp.status;
// 得到服务器响应的内容
// var content = xmlHttp.responseText; // 得到服务器响应的文本格式的内容
// var content = xmlHttp.responseXML; // 得到服务器响应的 xml 格式的内容, 它是 document 对象
// 注册监听器
xmlHttp.onreadystatechange = function(){
// 双重判断
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
// 获取服务器的响应内容
var text = xmlHttp.responseText;
}
}
5. ajax 示例
// 示例一: 发送 POST 请求
<html>
<head>
<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;
}
}
}
}
// html 页面加载完成后执行
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("POST","<c:url value='/AServlet'/>",true);
// 设置 Conten-Type 请求头
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 发送请求时, 指定请求体
xmlHttp.send("username=zhangsan&password=123");
// 注册监听器
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var text = xmlHttp.responseText;
var h1 = document.getElementById("h1");
h1.innnerHTML = text;
}
};
}
}
</script>
</head>
<body>
<button id="btn">点击这里</button>
<h1 id="h1"></h1>
</body>
</html>
// 示例二: 响应内容为 xml 数据
// 服务端需要设置响应头: response.setContentType("text/xml;charset=utf-8");
// 客户端需要使用 var doc = xmlHttp.responseXML; 获取 Document 对象;
// xml 文件
<?xml version="1.0" encoding="UTF-8"?>
<students>
<student number="1001">
<name>zhangsan</name>
<age>23</age>
<sex>male</sex>
</student>
</students>
// a.jsp
<html>
</head>
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET","<c:url value='/BServlet'/>",true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var doc = xmlHttp.responseXML;
var ele = doc.getElementsByTagName("student")[0];
var number = ele.getAttribute("number");
var name = ele.getElementsByTagName("name")[0].textContent;
var age = ele.getElementsByTagName("age")[0].textContent;
var sex = ele.getElementByTagName("sex")[0].textContent;
var text = number+":"+name+","+age+","+sex;
doc.getElementById("h1").innerHTML = text;
}
};
};
};
</head>
<body>
<button id="btn">点击这里</button>
<h1 id="h1"></h1>
</body>
</html>
示例三: 省市联动
5. 模拟 JQuery 的 AJAX 请求
//创建 request 对象
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();
}catch(e){
try{
return ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
throw e;
}
}
}
}
function ajax(option){
/*
* 分析:
* 参数 option 对象需要具有如下内容:
* 请求方式 method,
* 请求的 URL url,
* 是否异步 asyn,
* 请求体 params,
* 回调方法 callback,
* 服务器响应数据转换成什么类型 type
*/
// 1. 得到 xmlHTTP
var xmlHttp = createXMLHttpRequest();
// 2. 打开连接
if(!option.method){ // 如果method参数不存在,默认为 GET 请求
option.method="GET";
}
if(option.asyn == undefined){ // 默认异步处理
option.asyn = true;
}
xmlHttp.open(option.method,option.url,option.asyn);
// 判断是否为 POST
if("POST" == option.method){
xmlHTTP.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
// 发送请求
xmlHttp.send(option.params);
// 注册监听
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var data;
// 获取服务器的响应数据,进行转换
if(!option.type){
data = xmlHttp.responseText;
} else if(option.type == "xml"){
data = xmlHttp.responseXML;
} else if(option.type == "text"){
data = xmlHttp.responseText;
} else if(option.type == "json"){
var text = xmlHttp.responseText;
data = eval("("+text+")");
}
// 执行回调方法
option.callback(data);
}
};
}
参考资料:
AJAX 入门的更多相关文章
- 掌握 Ajax，第 1 部分: Ajax 入门简介
转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...
- AJAX入门---DOM操作HTML
AJAX入门---DOM操作HTML 一边学习AJAX一边坐着总结加深印象.上次写的是怎样简单的使用XMLHttpRequest对象.今天写的是DOM(文档对象模型(Document Object M ...
- ajax入门之建立XHR对象 (1)
ajax入门之建立XHR对象 今天帮朋友写了一个简单的ajax的demo,发现了一些东西,决定写一篇文章记录一下,避免以后挖坑. 创建XMLHttpRequest 通常 function create ...
- ASP.NET AJAX入门系列（4）：使用UpdatePanel控件（一）
UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...
- ASP.NET AJAX入门系列（1）：概述
经常关注我的Blog的朋友可能注意到了,在我Blog的左边系列文章中,已经移除了对Atlas学习手记系列文章的推荐,因为随着ASP.NET AJAX 1.0 Beta版的发布,它们已经不再适用,为了不 ...
- ASP.NET AJAX入门系列
ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...
- 系列文章--ASP.NET之AJAX入门教程
ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...
- Ajax入门（二）Ajax函数封装
如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...
- AJAX入门---点滴的积累
AJAX入门---点滴的积累 每次学习完一个内容总会写上几句话总结一下学习的内容.这不刚看完王兴魁老师讲的AJAX核心技术.如今回想梳理一下. 这套视频的内容不多,简单的解说了XMLHttpReque ...
- JavaEE的ajax入门
JavaEE的ajax入门 代码下载 链接:https://pan.baidu.com/s/1pb_sdSmV9Ncs6UIz3q2ztg 提取码:fgx6 复制这段内容后打开百度网盘手机App,操作 ...
随机推荐
- 神奇的canvas——点与线绘制的绚丽动画效果
代码地址如下:http://www.demodashi.com/demo/11636.html 前言 之前在某网站上看到了一个canvas绘制的动画效果,虽然组成的元素很简单,只有点和线,但是视觉效果 ...
- Jmeter-性能测试(三)
一.调通脚本(以json串Post接口为例)添加聚合报告(线程组->添加->监听器->聚合报告)并调试好需要压测的脚本,如下已经调通的P_C_B151就是我需要压测的脚本 二.设置场 ...
- js判段URL是否可用（js判段网络是否不可用）
下面亲自測试可行: 兼容全部浏览器,用JQuery的方法,能够判段URL是否可用.也能够判段网络是否不可用(前提:假设URL可用.返回也不是200,那就说明是网络不可用.能够以此作为网络是否可用的判段 ...
- jquery中Uncaught TypeError: $(...).ajaxUpload is not a function(…)错误解决方法
错误原因:该函数不是jquery的核心函数,所以需要外部引入ajaxfileupload.js文件,可能是没有引入,或者引入的js文件互相冲突 解决方法:每次进入一个函数之前打印该函数所有的js文件, ...
- Photoshop脚本之调试
系统:mac 创建test.scpt和test.jsx command+空格,打开 脚本编辑器(applescript) 脚本编辑器打开test.scpt 输入: tell application & ...
- Chromium中多线程及并发技术要点(C/C++)
类别 类 说明 演示样例 线程机制 Thread (參考:线程模型及应用指南) MessagePump MessageQueue SequencedWorkerPool 它是一个线程池,用 ...
- Vmware私有云虚拟机（CentOS 6.5 OS）之根分区扩容
注:适用于未使用lvm管理的分区,目前仅在CentOS 6.5 上操作,其他系统尚未测试,请谨慎操作 一.查看当前分区状况 [root@disk-test ~]# df -h Filesystem ...
- src.rpm包安装方法
有些软件包是以.src.rpm结尾的,这类软件包是包含了源代码的rpm包,在安装时需要进行编译.这类软件包有多种安装方法,以redhat为例说明如下: 注意: 如果没有rpmbuild可以从系统安装光 ...
- Android APK反编译就这么简单 具体解释
在学习Android开发的过程你.你往往会去借鉴别人的应用是怎么开发的,那些美丽的动画和精致的布局可能会让你爱不释手,作为一个开发人员.你可能会非常想知道这些效果界面是怎么去实现的,这时,你便能够对改 ...
- 高通音频 媒体喇叭增益隐藏参数（一个QACT无法修改的参数）
源文件位置:modem_proc\multimedia\audio\avs\src\sndhwg2.c sndhw_init()函数,2520行左右:pm_set_speaker_gain(PM_SP ...