JavaWeb学习笔记（二十）—— Ajax
一、Ajax概述
1.1 什么是Ajax
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。而传统的页面（不使用Ajax）如果需要更新内容，必须重载整个网页页面。
1.2 Ajax常见的应用场景
百度的搜索框：
用户注册时：
1.3 同步交互与异步交互
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求。刷新的是整个页面
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。可以使用js接收服务器的响应，然后使用js来局部刷新
1.4 AJAX的运行原理
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎就会提交请求到服务器端。在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面的功能。
如图：
1.1 使用JavaScript获得浏览器内置的Ajax引擎（XMLHttpRequest对象）
1.2 通过Ajax引擎确定请求路径和请求参数
1.3 通知Ajax引擎发送请求
Ajax引擎会在不刷新浏览器地址栏的情况下，发送请求
2.1 服务器获得请求参数
2.2 服务器处理请求参数（添加、查询等操作）
2.3 服务器响应数据给浏览器
Ajax引擎获得服务器响应的数据，通过执行JavaScript的回调函数将数据传递给浏览器页面
3.1 通过设置给Ajax引擎的回调函数获得服务器响应的数据
3.2 通过JavaScript在指定的位置，显示响应数据，从而局部修改页面的数据，达到局部刷新的目的。
1.5 AJAX的优缺点
优点：
- AJAX使用Javascript技术向服务器发送异步请求，增强了用户的体验；
- AJAX无须刷新整个页面；
- 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高，减小了服务器的压力；
缺点：
- AJAX并不适合所有场景，很多时候还是要使用同步交互；
- AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
- 因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；
二、JavaScript的Ajax技术（了解）
创建Ajax引擎对象：var xmlHttp = new XMLHttpRequest();
为Ajax引擎对象绑定监听：xmlHttp.onreadystatechange = function(){}
绑定提交地址：xmlHttp.open(method, url, async)
method：请求方式，通常为GET或POST
url：请求的服务器地址
async：默认值为true，表示异步请求发送请求
POST请求：xmlHttp.send("username=zhangSan&password=123")
GET请求：xmlHttp.send()
注意：如果是POST请求，在发送请求前设置请求头:
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
如果是GET请求，可以不用设置请求头。接收响应数据
var content = xmlHttp.responseText——得到服务器响应的文本格式内容
var content = xmlHttp.responseXML——得到服务器响应的xml响应内容，它是Document对象
【测试】
<script type="text/javascript">
function fn1(){
//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
var xmlHttp = new XMLHttpRequest();
//2、绑定监听 ---- 监听服务器是否已经返回相应数据
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//5、接受相应数据
var res = xmlHttp.responseText;
document.getElementById("span1").innerHTML = res;
}
}
//3、绑定地址
xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);
//4、发送请求
xmlHttp.send();
}
function fn2(){
//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
var xmlHttp = new XMLHttpRequest();
//2、绑定监听 ---- 监听服务器是否已经返回相应数据
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//5、接受相应数据
var res = xmlHttp.responseText;
document.getElementById("span2").innerHTML = res;
}
}
//3、绑定地址
xmlHttp.open("POST","/WEB22/ajaxServlet",false);
//4、发送请求
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("name=wangwu");
}
</script>
</head>
<body>
<input type="button" value="异步访问服务器端" onclick="fn1()"><span id="span1"></span>
<br>
<input type="button" value="同步访问服务器端" onclick="fn2()"><span id="span2"></span>
<br>
<input type="button" value="测试按钮" onclick="alert()">
</body>
三、Jquery的Ajax技术（重点）
- $.get(url, [data], [callback], [type])
url：代表请求的服务器端地址
data：代表请求服务器端的数据
callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）function fn1(){
//get异步访问
$.get(
"/WEB22/ajaxServlet2", //url地址
{"name":"张三","age":25}, //请求参数
function(data){ //执行成功后的回调函数
//{\"name\":\"tom\",\"age\":21}
alert(data.name);
},
"json"
);
}public class AjaxServlet2 extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String name = request.getParameter("name");
String age = request.getParameter("age"); System.out.println(name+" "+age); //java代码只能返回一个json格式的字符串
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("{\"name\":\"汤姆\",\"age\":21}"); } protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
} - $.post(url, [data], [callback], [type])
function fn2(){
//post异步访问
$.post(
"/WEB22/ajaxServlet2", //url地址
{"name":"李四","age":25}, //请求参数
function(data){ //执行成功后的回调函数
alert(data.name);
},
"json"
);
} - $.ajax( { option1:value1,option2:value2... } );
function fn3(){
$.ajax({
url:"/WEB22/ajaxServlet2",
async:true,
type:"POST",
data:{"name":"lucy","age":18},
success:function(data){
alert(data.name);
},
error:function(){
alert("请求失败");
},
dataType:"json"
});
}
JavaWeb学习笔记（二十）—— Ajax的更多相关文章
- python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文 实例代码
python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文 实例代码 python的json.dumps方法默认会输出成这种格式"\u535a\u ...
- python3.4学习笔记(二十五) Python 调用mysql redis实例代码
python3.4学习笔记(二十五) Python 调用mysql redis实例代码 #coding: utf-8 __author__ = 'zdz8207' #python2.7 import ...
- python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法
python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法window安装redis,下载Redis的压缩包https://git ...
- python3.4学习笔记(二十二) python 在字符串里面插入指定分割符，将list中的字符转为数字
python3.4学习笔记(二十二) python 在字符串里面插入指定分割符,将list中的字符转为数字在字符串里面插入指定分割符的方法,先把字符串变成list然后用join方法变成字符串str=' ...
- python3.4学习笔记(二十) python strip()函数 去空格\n\r\t函数的用法
python3.4学习笔记(二十) python strip()函数 去空格\n\r\t函数的用法 在Python中字符串处理函数里有三个去空格(包括'\n', '\r', '\t', ' ')的函数 ...
- (C/C++学习笔记) 二十四. 知识补充
二十四. 知识补充 ● 子类调用父类构造函数 ※ 为什么子类要调用父类的构造函数? 因为子类继承父类,会继承到父类中的数据,所以子类在进行对象初始化时,先调用父类的构造函数,这就是子类的实例化过程. ...
- (C/C++学习笔记) 二十二. 标准模板库
二十二. 标准模板库 ● STL基本介绍 标准模板库(STL, standard template library): C++提供的大量的函数模板(通用算法)和类模板. ※ 为什么我们一般不需要自己写 ...
- (C/C++学习笔记) 二十. 文件和流
二十. 文件和流 ● 文件的概念 文件(file) 一. C/C++语言将文件作为字节序列(sequence of characters)来对待,但从编码角度,或说从对字节信息的解释来看,文件分为:文 ...
- JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]
1.$和jquery在全局命名空间中定义的唯一两个变量. 2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象. 3.jquery的四种调用方式: <1>传递C ...
- Javaweb学习笔记——（十二）——————JSP指令：page指令、include指令、taglib指令，JavaBean，内省，EL表达式
JSP指令JSP指令分类 JSP有三大指令: *page指令 *include指令 *taglib指令 在JSP中没有任何指令是必须的. 但基本上每个JSP都是使用page指令============ ...
随机推荐
- jquery简单ajax示例_读取json文件数据
来自于<jquery权威指南> -------------------------------------- 点击button后,获取到json文件数据,显示如下: Json文件: [ { ...
- Smarty的条件判断语句
(1)基本句式{if $name eq "Fred"}Welcome Sir.{elseif $name eq "Wilma"}Welcome Ma'am.{e ...
- mybaits foreach
<select id="selectQuickConsultDoctorList" resultMap="BaseResultMap" parameter ...
- c_c++基础问题(平时读书时笔记)
1 IP私有地址: 10.0.0.0 -- 10.255.255.255 172.16.0.0 -- 172.31.255.255 192.168.0.0 -- 192.168.255.255 2OS ...
- 谷歌浏览器插件开发入门-官方版Helloworld详解
目录: 需求 原理 实现步骤: 一个空的插件 一个可以设置一种背景色的插件(可以设置百度首页的背景色为绿色) 一个可以设置多种背景色的插件 需求: 插件可以改变特定网址的背景颜色. 原理: 将各种ht ...
- 玩转车联网1---初识OBD和行车助手
题目取得有点大,不免有博取眼球之嫌.车联网作为物联网的一个分支,预计在2015年市场会达到1500亿,特斯拉股票balabala,谷歌无人驾驶, 当然,我们是技术类博客,得找个能够快速上手,快速落地的 ...
- Sql Server 2012 数据库同步方式 (发布、订阅)
上篇中说了通过SQL JOB的方式对数据库的同步,这一节作为上一节的延续介绍通过发布订阅的方式实现数据库之间的同步操作.发布订阅份为两个步骤:1.发布.2订阅.首先在数据源数据库服务器上对需要同步的数 ...
- NuGet文件下载与应用
nuget是一款.net下强大的包管理开发工具,Visual Studio 2013和Visual Studio 2015都缺省支持Nuget.在线开发能享受到Nuget的便利,但是如果是离线开发,还 ...
- 清北学堂（2019 4 30 ） part 3
今天总的讲些算法,会了的话...看上去好厉害的样子: 1.老朋友动态规划DP: DP重点: 1.边界条件,开头不需处理的数据,比如斐波那契数列中的第一二项 2.转移方程,后面的项需要根据前面几项求出自 ...
- leetcode 2 两数相加 JAVA
题目: 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示 ...