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,操作 ...
随机推荐
- jmeter脚本开发-BeanShell Sampler与Debug Sampler
BeanShell支持java对象的调用,所以可直接通过BeanShell来调用java接口程序. BeanShell调用java接口例子 1.先编写两个简单的java类 创建java简单工程,并创建 ...
- 集成ueditor工具
摘要: 摘要: 版权声明:本文为博主原创文章,未经博主允许不得转载. UEditor 是百度的一套开源的在线HTML编辑器. 第一步:去官网看官网文档,了解这个工具如何使用以及下载,本人下载的是1.4 ...
- FZU2171：防守阵地 II(线段树)
Problem Description 部队中总共同拥有N个士兵,每一个士兵有各自的能力指数Xi.在一次演练中,指挥部确定了M个须要防守的地点,指挥部将选择M个士兵依次进入指定地点进行防守任务.获得 ...
- Linux如何关机与关机命令祥解
Linux关机命令祥解 1.直接关电源 2.init 0 3.telinit 0 4.shutdown -h now 5.halt6.poweroff 1.shutdown shutdown命令安全地 ...
- unity, PlayerPrefs.GetInt(key,defaultValue)
PlayerPrefs.GetInt(key,defaultValue)中的defaultValue参数非常有用,因为玩家第一次玩的时候存档还没有建立.所以需要使用defaultValue参数,相当于 ...
- 用brew安装gcc48
由于mac自带的gcc的版本过低,因此想自己装一个新的gcc. 在网上搜索了一圈后发现用brew install安装比较简单,但可能由于本地的brew有冲突,因此网上的攻略都没有效果. 通过在gith ...
- Atitit.cateService分类管理新特性与设计文档说明v1
Atitit.cateService分类管理新特性与设计文档说明v1 1. V2 新特性规划1 2. 分类管理1 3. 分类增加与修改维护2 4. Js控件分类数据绑定2 1. V2 新特性规划 增加 ...
- 激活modelsim se 10.4 时运行patch_dll.bat不能生成TXT
问题描述: 激活modelsim时运行patch_dll.bat总是在DOS界面一闪而过,不能生成LICENSE.TXT 问题解决: 先取消文件 mgls64.dll 的只读属性(这句话在README ...
- 92. Reverse Linked List II【Medium】
92. Reverse Linked List II[Medium] Reverse a linked list from position m to n. Do it in-place and in ...
- java - day13 - UnionPay
银行功能实现,主要为抽象类及接口的运用 package com.javatest.bankimple; /* UnionPay */ //银联接口 public interface UnionPay ...