一、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技术(了解)

  1. 创建Ajax引擎对象:var xmlHttp = new XMLHttpRequest();

  2. 为Ajax引擎对象绑定监听:xmlHttp.onreadystatechange = function(){}

  3. 绑定提交地址:xmlHttp.open(method, url, async)

    1. method:请求方式,通常为GETPOST
    2. url:请求的服务器地址
    3. async:默认值为true,表示异步请求
  4. 发送请求

    1. POST请求:xmlHttp.send("username=zhangSan&password=123")
    2. GET请求:xmlHttp.send()
      注意:如果是POST请求,在发送请求前设置请求头:
      xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      如果是GET请求,可以不用设置请求头。
  5. 接收响应数据

    1. var content = xmlHttp.responseText——得到服务器响应的文本格式内容
    2. var content = xmlHttp.responseXML——得到服务器响应的xml响应内容,它是Document对象

【测试】

  1. <script type="text/javascript">
  2.  
  3. function fn1(){
  4. //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
  5. var xmlHttp = new XMLHttpRequest();
  6. //2、绑定监听 ---- 监听服务器是否已经返回相应数据
  7. xmlHttp.onreadystatechange = function(){
  8. if(xmlHttp.readyState==4&&xmlHttp.status==200){
  9. //5、接受相应数据
  10. var res = xmlHttp.responseText;
  11. document.getElementById("span1").innerHTML = res;
  12. }
  13. }
  14. //3、绑定地址
  15. xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);
  16. //4、发送请求
  17. xmlHttp.send();
  18.  
  19. }
  20. function fn2(){
  21. //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
  22. var xmlHttp = new XMLHttpRequest();
  23. //2、绑定监听 ---- 监听服务器是否已经返回相应数据
  24. xmlHttp.onreadystatechange = function(){
  25. if(xmlHttp.readyState==4&&xmlHttp.status==200){
  26. //5、接受相应数据
  27. var res = xmlHttp.responseText;
  28. document.getElementById("span2").innerHTML = res;
  29. }
  30. }
  31. //3、绑定地址
  32. xmlHttp.open("POST","/WEB22/ajaxServlet",false);
  33. //4、发送请求
  34. xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  35. xmlHttp.send("name=wangwu");
  36.  
  37. }
  38.  
  39. </script>
  40.  
  41. </head>
  42. <body>
  43. <input type="button" value="异步访问服务器端" onclick="fn1()"><span id="span1"></span>
  44. <br>
  45. <input type="button" value="同步访问服务器端" onclick="fn2()"><span id="span2"></span>
  46. <br>
  47. <input type="button" value="测试按钮" onclick="alert()">
  48. </body>

三、Jquery的Ajax技术(重点)

  • $.get(url, [data], [callback], [type])

    1. url:代表请求的服务器端地址
    2. data:代表请求服务器端的数据
    3. callback:表示服务器端成功响应所触发的函数(只有正常成功返回才执行)
    4. type:表示服务器端返回的数据类型(jquery会根据指定的类型自动类型转换)
    1. function fn1(){
    2. //get异步访问
    3. $.get(
    4. "/WEB22/ajaxServlet2", //url地址
    5. {"name":"张三","age":25}, //请求参数
    6. function(data){ //执行成功后的回调函数
    7. //{\"name\":\"tom\",\"age\":21}
    8. alert(data.name);
    9. },
    10. "json"
    11. );
    12. } 
    1. public class AjaxServlet2 extends HttpServlet {
    2.  
    3. protected void doGet(HttpServletRequest request, HttpServletResponse response)
    4. throws ServletException, IOException {
    5.  
    6. request.setCharacterEncoding("UTF-8");
    7.  
    8. String name = request.getParameter("name");
    9. String age = request.getParameter("age");
    10.  
    11. System.out.println(name+" "+age);
    12.  
    13. //java代码只能返回一个json格式的字符串
    14. response.setContentType("text/html;charset=UTF-8");
    15. response.getWriter().write("{\"name\":\"汤姆\",\"age\":21}");
    16.  
    17. }
    18.  
    19. protected void doPost(HttpServletRequest request, HttpServletResponse response)
    20. throws ServletException, IOException {
    21. doGet(request, response);
    22. }
    23. }
  • $.post(url, [data], [callback], [type])
    1. function fn2(){
    2. //post异步访问
    3. $.post(
    4. "/WEB22/ajaxServlet2", //url地址
    5. {"name":"李四","age":25}, //请求参数
    6. function(data){ //执行成功后的回调函数
    7. alert(data.name);
    8. },
    9. "json"
    10. );
    11. }
  • $.ajax( { option1:value1,option2:value2... } );
    1. function fn3(){
    2. $.ajax({
    3. url:"/WEB22/ajaxServlet2",
    4. async:true,
    5. type:"POST",
    6. data:{"name":"lucy","age":18},
    7. success:function(data){
    8. alert(data.name);
    9. },
    10. error:function(){
    11. alert("请求失败");
    12. },
    13. dataType:"json"
    14. });
    15. }

JavaWeb学习笔记(二十)—— Ajax的更多相关文章

  1. python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文 实例代码

    python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文 实例代码 python的json.dumps方法默认会输出成这种格式"\u535a\u ...

  2. python3.4学习笔记(二十五) Python 调用mysql redis实例代码

    python3.4学习笔记(二十五) Python 调用mysql redis实例代码 #coding: utf-8 __author__ = 'zdz8207' #python2.7 import ...

  3. python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法

    python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法window安装redis,下载Redis的压缩包https://git ...

  4. python3.4学习笔记(二十二) python 在字符串里面插入指定分割符,将list中的字符转为数字

    python3.4学习笔记(二十二) python 在字符串里面插入指定分割符,将list中的字符转为数字在字符串里面插入指定分割符的方法,先把字符串变成list然后用join方法变成字符串str=' ...

  5. python3.4学习笔记(二十) python strip()函数 去空格\n\r\t函数的用法

    python3.4学习笔记(二十) python strip()函数 去空格\n\r\t函数的用法 在Python中字符串处理函数里有三个去空格(包括'\n', '\r', '\t', ' ')的函数 ...

  6. (C/C++学习笔记) 二十四. 知识补充

    二十四. 知识补充 ● 子类调用父类构造函数 ※ 为什么子类要调用父类的构造函数? 因为子类继承父类,会继承到父类中的数据,所以子类在进行对象初始化时,先调用父类的构造函数,这就是子类的实例化过程. ...

  7. (C/C++学习笔记) 二十二. 标准模板库

    二十二. 标准模板库 ● STL基本介绍 标准模板库(STL, standard template library): C++提供的大量的函数模板(通用算法)和类模板. ※ 为什么我们一般不需要自己写 ...

  8. (C/C++学习笔记) 二十. 文件和流

    二十. 文件和流 ● 文件的概念 文件(file) 一. C/C++语言将文件作为字节序列(sequence of characters)来对待,但从编码角度,或说从对字节信息的解释来看,文件分为:文 ...

  9. JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]

    1.$和jquery在全局命名空间中定义的唯一两个变量.   2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象.   3.jquery的四种调用方式:     <1>传递C ...

  10. Javaweb学习笔记——(十二)——————JSP指令:page指令、include指令、taglib指令,JavaBean,内省,EL表达式

    JSP指令JSP指令分类 JSP有三大指令: *page指令 *include指令 *taglib指令 在JSP中没有任何指令是必须的. 但基本上每个JSP都是使用page指令============ ...

随机推荐

  1. ApexSql Log 数据库操作的后悔药

    ApexSQL Log破解版是一款功能强大的SQL数据恢复工具,支持SQL2005/2008/2012.很多时候我们存放在服务器中的SQL数据库会因黑客破坏或误操作造成数据库文件丢失的你问题,当数据库 ...

  2. 面向对象的JavaScript-007-Function.prototype.bind() 的4种作用

    1. // Function.prototype.bind() 的作用 // 1.Creating a bound function this.x = 9; var module = { x: 81, ...

  3. Linux网络配置之虚拟网卡的配置(ubuntu 16.04)

    关于图形界面的配置,我这里就不多介绍了,这个很简单.这里介绍的是如何通过修改配置文件来实现虚拟网卡. 首先介绍ubuntu(我这里使用的是ubuntu-16.04)下虚拟网卡的配置 1.先用ifcon ...

  4. Spring.net页面属性注入

    .条件spring.web程序集 1.1 system.web配置 <httpHandlers> <add verb="*" path="*.aspx& ...

  5. JS中的唯一容器:数组

    JS中的唯一容器:数组 一.什么类型的数据都可以存储 二. 定义的方式有两种  1 .    var  arra=[];var  arra=[“a”,“b”,"c"];   2.v ...

  6. myeclipse快捷键记忆

    提示 Alt+?自动排版 Ctrl+shift+f自动添加引入包 Ctrl+shift+O切换窗口 Ctrl+F6自动添加set get方法 Alt+shift+s r 查看都是哪里调用了该方法 Ct ...

  7. HDU 6127 Hard challenge (极角扫描)

    题意:给定 n 个点,和权值,他们两两相连,每条边的权值就是他们两个点权值的乘积,任意两点之间的直线不经过原点,让你从原点划一条直线,使得经过的直线的权值和最大. 析:直接进行极角扫描,从水平,然后旋 ...

  8. 编写高质量代码改善C#程序的157个建议——建议127:用形容词组给接口命名

    建议127:用形容词组给接口命名 接口规范的是“Can do”,也就是说,它规范的是类型可以具有哪些行为.所以,接口的命名应该是一个形容词,如: IDisposable表示可以被释放 IEnumera ...

  9. 网站页面多出&65279出现空白行的原因及解决方法

    模板文件生成html文件之后会在body开头处加入一个可见的控制符&#65279,导致页面头部会出现一个空白行.原因是页面的编码是UTF-8 + BOM. 这种编码方式一般会在windows操 ...

  10. replaceState 实现返回从新定位

    在web 开发中,选择列表分类,在中商品, 详情页面后,返回的时候我们想定位到原来选择的分类 就需要借助window.history.replaceState来实现 function getProdu ...