Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR),这是由微软首先引入的一个特性,其他浏览器提供商后来都提供了相同的实现。在 XHR 出现之前,Ajax 式的通信必须借助一些手段来实现,大多数是使用隐藏的框架或内嵌框架。XHR 的出现,提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息,这就意味着,用户只要触发某一事件,在不刷新网页的情况下,更新服务器最新的数据。虽然 Ajax 中的 x 代表的是 XML,但 Ajax 通信和数据格式无关,也就是说这种技术不一定使用 XML。IE7+、Firefox、Opera、Chrome 都支持原生的 XHR 对象,在这些浏览器中创建 XHR 对象可以直接实例化 XMLHttpRequest 即可。

var xhr = new XMLHttpRequest();
alert(xhr); //XMLHttpRequest

了解:较老的 IE 版本创建 Microsoft.XMLHTTP 对象:
var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

在使用 XHR 对象时,先必须调用 open()方法,它接受三个参数:要发送的请求类型(get、post)、请求的 URL 和表示是否异步。open()方法并不会真正发送请求,而只是启动一个请求以备发送。通过 send()方法进行发送请求,send()方法接受一个参数,作为请求主体发送的数据。如果不需要则,必须填 null。执行 send()方法之后,请求就会发送到服务器上。
当请求发送到服务器端,收到响应后,响应的数据会自动填充 XHR 对象的属性。那么一共有四个属性:

接受响应之后,第一步检查 status 属性,以确定响应已经成功返回。一般情况 HTTP 状态代码为 200 作为成功的标志。除了成功的状态代码,还有一些别的:

我们判断 HTTP 状态值即可,不建议使用 HTTP 状态说明,因为在跨浏览器的时候,可能会不太一致。

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html PUBLIC >
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>Insert title here</title>
  7. </head>
  8. <body>
  9.  
  10. </body>
  11. <script>
  12. var xhr=new XMLHttpRequest();
  13. console.log(xhr);
  14.  
  15. xhr.open("get","test.json?uname=zs",false)
  16. xhr.send(null);
  17. if(xhr.status==200){
  18. var text=xhr.responseText;
  19. console.log(text);
  20. }
  21. </script>
  22. </html>

同步调用固然简单,但使用异步调用才是我们真正常用的手段。使用异步调用的时候,检测 readyState 属性,每当 readyState 属性改变时,触发readystatechange 事件。这个属性有五个值:

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html PUBLIC >
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>Insert title here</title>
  7. </head>
  8. <body>
  9.  
  10. </body>
  11. <script type="text/javascript">
  12. var xhr=new XMLHttpRequest()
  13. console.log(xhr);
  14. console.log(xhr.readyState);
  15.  
  16. xhr.open("get","test.json?liu=feng",true);
  17. console.log(xhr.readyState);
  18.  
  19. xhr.send(null);
  20. xhr.onreadystatechange=function(){
  21. console.log(xhr.readyState);
  22. if(xhr.readyState==4){
  23. if(xhr.status==200){
  24. var text=xhr.responseText;
  25. console.log(text)
  26. }
  27. }
  28. }
  29.  
  30. </script>
  31. </html>

在提供服务器请求的过程中,有两种方式,分别是:GET 和 POST。在 Ajax 使用的过程中,GET 的使用频率要比 POST 高。
GET  请求
GET 请求是最常见的请求类型,最常用于向服务器查询某些信息。必要时,可以将查询字符串参数追加到 URL 的末尾,以便提交给服务器xhr.open('get','diner/login?'+'name=Lee&age=100',true);通过 URL 后的问号给服务器传递键值对数据,服务器接收到返回响应数据。特殊字符传参产生的问题可以使用 encodeURIComponent()进行编码处理,中文字符的返回及传参,可以将页面保存和设置为 utf-8 格式即可,AJAX 返回的数据为 UTF-8

  1. /一个通用的 URL 提交函数
  2. function addURLParam(url, name, value) {
  3. //判断的 url 是否有已有参数
  4. url += (url.indexOf('?') == -1 ? '?' : '&');
  5. url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
  6. return url;
  7. }

当没有 encodeURIComponent()方法时,在一些特殊字符比如“&”,会出现错误导致无法获取。

POST  请求
POST 请求可以包含非常多的数据,我们在使用表单提交的时候,很多就是使用的 POST 传输方式。
xhr.open('post', 'diner/login', true);
而发送 POST 请求的数据,不会跟在 URL 的尾巴上,而是通过 send()方法向服务器提交数据。
xhr.send('name=Lee&age=100');
一般来说,向服务器发送 POST 请求由于解析机制的原因,需要进行特别的处理。因为POST请求和Web表单提交是不同的,需要使用XHR来模仿表单提交。
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
从性能上来讲 POST 请求比 GET 请求消耗更多一些,用相同数据比较,GET最多比 POST 快两倍。

三、封装 Ajax
因为 Ajax 使用起来比较麻烦,主要就是参数问题,比如到底使用 GET 还是
POST;我们需要封装一个 Ajax 函数,来方便我们调用。

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html PUBLIC >
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>Insert title here</title>
  7. </head>
  8. <body>
  9.  
  10. </body>
  11. <script>
  12. var obj={
  13. url:"user",
  14. data:{name:"zs",age:18},
  15. async:true,
  16. success:function(result){
  17. console.log(result);
  18. console.log(JSON.parse(result));
  19. },
  20. error:function(result){
  21. console.log(result);
  22. }
  23. };
  24.  
  25. ajax(obj);
  26.  
  27. function ajax(obj){
  28. var xhr=new XMLHttpResquest();
  29. obj.data=params(obj.data);
  30. if(obj.method.toUpperCase()=="GET"){
  31. obj.url+=(obj.method.indexOf("?")==-1)? "?" +obj.data:"&"+obj.data;
  32. xhr.open(obj.mehod,obj.url,obj.async);
  33. xhr.send(null);
  34. }else{
  35. xhr.open(obj.method,obj.url,obj.async);
  36. xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencode");
  37. xhr.send(obj.data);
  38. }
  39. if(obj.async){
  40. xhr.onreadystatechange=function(){
  41. if(xhr.readyState==4){
  42. callback();
  43. }
  44. }
  45. }else{
  46. callback;
  47. }
  48. }
  49.  
  50. function callback(){
  51. if(xhr.status==200){
  52. obj.success(xhr.responseText);
  53.  
  54. }else{
  55. obj.error("请求失败!"+xhr.status+xhr.statusText)
  56. }
  57. }
  58. function params(data){
  59. var arr=[];
  60. if(data!= null && !=""){
  61. for(var d in data){
  62. var name=encodeURICompoent(d);
  63. var value=encodeURICompoent(data[d]);
  64. arr.push(name+"="+value);
  65. }
  66. var param=arr.join("&");
  67. return param;
  68. }
  69. return null;
  70. }
  71. </script>
  72. </html>
  1. import java.io.IOException;
  2. import java.util.HashMap;
  3. import java.util.Map;
  4.  
  5. import javax.servlet.ServletException;
  6. import javax.servlet.annotation.WebServlet;
  7. import javax.servlet.http.HttpServlet;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpServletResponse;
  10.  
  11. import com.alibaba.fastjson.JSON;
  12.  
  13. /**
  14. * Servlet implementation class servlet01
  15. */
  16. @WebServlet("/s01")
  17. public class servlet01 extends HttpServlet {
  18. private static final long serialVersionUID = 1L;
  19.  
  20. /**
  21. * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
  22. */
  23. protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  24. // TODO Auto-generated method stub
  25. System.out.println("servlet");
  26. Map<String, Object> map= new HashMap<>();
  27. map.put("uname", "zs");
  28. map.put("age", 18);
  29. map.put("sex", true);
  30. String json=JSON.toJSONString(map);
  31. response.setContentType("application/json;charset=UTF-8");
  32. response.getWriter().write(json);
  33. }
  34.  
  35. }

封装 Ajax 并不是一开始就形成以上的形态,需要经过多次变化而成。
同步:
提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事。一心一意,当前只能做一件事,其他事情必须等当前的事情完成,才能继续后面的事情。
异步:
请求通过事件触发->服务器处理(这时浏览器仍然可以做其他事情)->处理完毕 。三心二意:同时可以做多件事情:左手按着空格键,右手可以不断的击打鼠标,眼睛还要同时看着屏幕,很辛苦。

ajax的底层实现的更多相关文章

  1. ajax的底层前后台交互

    为什么用ajax或者它的优点: 异步加载数据,无需切换页面 更加的用户体验,局部刷新,及时验证,操作步骤简化: 节省流量 js控制数据的加载,更加灵活多用. 底层就是XMLHttpRequest对象: ...

  2. Ajax提交底层原型XMLHttpRequest

    相信接触过ajax的都觉得其post,get提交很方便,那么他是怎么实现的呢?基于此我们就不得不谈到js中的XMLHttpRequest对象. 其中w3c中是这样解释的: XMLHttpRequest ...

  3. jQuery源码分析系列(30) : Ajax 整体结构

    开头引用一段 想起一句话:前端研究,研究个屁~ 的确如此呀.补充下联:前端设计,设计个屁~ 前端目前最大的困境是,如 HTML 一样,无论你承不承认,市场上并不太需要 HTML 高手 其实这里引发一个 ...

  4. jQuery源码分析系列(31) : Ajax deferred实现

    AJAX的底层实现都是浏览器提供的,所以任何基于api上面的框架或者库,都只是说对于功能的灵活与兼容维护性做出最优的扩展 ajax请求的流程: 1.通过 new XMLHttpRequest 或其它的 ...

  5. Ajax跨域:Jsonp原理解析

    推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...

  6. Ajax的工作原理

    Ajax的核心是JavaScript对象XmlHttpRequest.该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术.简而言之,XmlHttpRequest使您可 ...

  7. 29、Jquery Ajax

    Ajax Asynchronsous Javascript and XML(异步Javascript和XML). Ajax 是一种无需重新加载整个页面的情况下,更新局部页面的技术. 不是指一种单一的技 ...

  8. 关于jQuery的ajax的源码的dataType解读

    $.ajax其实底层还是用的XMLHttpRequest,对于加载数据的格式datatype有:xml.text.html.json.jsonp.script. 其中xml.text不需要处理,直接使 ...

  9. jquery ajax方法和其他api回顾

    >> $ele.load(url, data, callback); //带data参数时为POST请求,否则为GET请求 // $('#testload').load('data.htm ...

随机推荐

  1. 卸载未能成功安装的mysql时的解决方案

    在win10系统中,首次未能成功安装mysql,于是试图卸载了mysql相关的应用,结果提示有卸载未完成的应用,无法卸载, 在阅读文档之后发现,可以在任务管理器中的详细信息中找到[dllhost.ex ...

  2. mysql5.6.36 编译报错make[1]: *** [storage/perfschema/unittest/CMakeFiles/pfs_connect_attr-t.dir/all]..

    cmake -DCMAKE_INSTALL_PREFIX=/usr/local/mysql -DMYSQL_DATADIR=/data/mysqldb -DMYSQL_UNIX_ADDR=/tmp/m ...

  3. upload上传通关游戏

    第一关:后缀名限制,抓包改一下后缀. 前端脚本检测文件扩展名.当客户端选择文件点击上传的时候,客户端还没有向服务器发送任何消 息,前端的 js 脚本就对文件的扩展名进行检测来判断是否是可以上传的类型 ...

  4. C++.控制台_界面颜色

    1.c++中system(_color )怎样用?-CSDN论坛.html(https://bbs.csdn.net/topics/390758320) 2. 2.1. 颜色属性由两个十六进制数字指定 ...

  5. spring中的bean的生命周期

    bean的生命周期:bean的创建 —— 初始化 ——销毁的过程 容器管理bean的生命周期,我们可以自定义初始化和销毁方法,容器在bean进行到当前生命周期就会调用我们的方法 在xml配置文件中是在 ...

  6. eNSP——VLAN基础配置和Access

    原理: 早期的局域网技术是基于总线型的结构,也就是说所有主机共享一条传输线路.这就带来了很多问题:冲突域和安全问题.为了避免冲突域,我们使用二层交换机.但想想,一台计算机在总线上传输数据的时候,所有计 ...

  7. storm1.2.2集群搭建

    一.下载.解压 二.配置安装 1.配置分配 1.zk的集群分别在:192.168.100.143  192.168.100.144  192.168.100.145 三台服务器上, zk集群的安装说见 ...

  8. javaweb中关于转发与重定向的写法

    转发: RequestDispatcher rd = request.getRequestDispatcher("/WEB-INF/main.jsp"); rd.forward(r ...

  9. (八)动态 sql

    目录 什么是动态 sql sql 片段 foreach 标签 什么是动态 sql 我们之前在映射文件中,配置 sql 的时候,其实都是静态的 : <!--复杂查询--> <selec ...

  10. dede按照权重排序dede:list和得的:arclist

    dede:list 的方法 1.找到"根目录\include\arc.listview.class.php"文件. 2.修改代码:在文件第727行处添加按weight排序判断代码( ...