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 状态说明，因为在跨浏览器的时候，可能会不太一致。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC >

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

</head>

<body>

</body>

<script>

var xhr=new XMLHttpRequest();

console.log(xhr);

xhr.open("get","test.json?uname=zs",false)

xhr.send(null);

if(xhr.status==200){

    var text=xhr.responseText;

    console.log(text);

}

</script>

</html>

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

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC >

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

</head>

<body>

</body>

<script type="text/javascript">

    var xhr=new XMLHttpRequest()

    console.log(xhr);

    console.log(xhr.readyState);

    xhr.open("get","test.json?liu=feng",true);

    console.log(xhr.readyState);

    xhr.send(null);

    xhr.onreadystatechange=function(){

        console.log(xhr.readyState);

        if(xhr.readyState==4){

            if(xhr.status==200){

                var text=xhr.responseText;

                console.log(text)

            }

        }

    }

</script>

</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

/一个通用的 URL 提交函数

function addURLParam(url, name, value) {

//判断的 url 是否有已有参数

url += (url.indexOf('?') == -1 ? '?' : '&');

url += encodeURIComponent(name) + '=' + encodeURIComponent(value);

return url;

}

当没有 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 函数，来方便我们调用。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC >

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

</head>

<body>

</body>

<script>

var obj={

    url:"user",

    data:{name:"zs",age:18},

    async:true,

    success:function(result){

        console.log(result);

        console.log(JSON.parse(result));

    },

    error:function(result){

        console.log(result);

    }

};

ajax(obj);

function ajax(obj){

    var xhr=new XMLHttpResquest();

    obj.data=params(obj.data);

    if(obj.method.toUpperCase()=="GET"){

        obj.url+=(obj.method.indexOf("?")==-1)? "?" +obj.data:"&"+obj.data;

        xhr.open(obj.mehod,obj.url,obj.async);

        xhr.send(null);

    }else{

        xhr.open(obj.method,obj.url,obj.async);

        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencode");

        xhr.send(obj.data);

    }

    if(obj.async){

        xhr.onreadystatechange=function(){

            if(xhr.readyState==4){

                callback();

            }

        }

    }else{

        callback;

    }

}

function callback(){

    if(xhr.status==200){

        obj.success(xhr.responseText);

    }else{

        obj.error("请求失败！"+xhr.status+xhr.statusText)

    }

}

function params(data){

    var arr=[];

    if(data!= null && !=""){

        for(var d in data){

            var name=encodeURICompoent(d);

            var value=encodeURICompoent(data[d]);

            arr.push(name+"="+value);

        }

        var param=arr.join("&");

        return param;

    }

    return null;

}

</script>

</html>
import java.io.IOException;

import java.util.HashMap;

import java.util.Map;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;

/**

 * Servlet implementation class servlet01

 */

@WebServlet("/s01")

public class servlet01 extends HttpServlet {

    private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)

     */

    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

        System.out.println("servlet");

        Map<String, Object> map= new HashMap<>();

        map.put("uname", "zs");

        map.put("age", 18);

        map.put("sex", true);

        String json=JSON.toJSONString(map);

        response.setContentType("application/json;charset=UTF-8");

        response.getWriter().write(json);

    }

}

封装 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. Java中的一些关键字：static，final，和abstract，interface，以及访问修饰符说明

    1.关键字可以修饰的说明: 关键字 属性(是否可修饰) 方法(是否可修饰) 类(是否可修饰) static 是 是 是 final 是 是 是 abstract 否 是 是 2.关键字的意义: 关键字 ...

  2. 最新 巨人网络java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.巨人网络等10家互联网公司的校招Offer,因为某些自身原因最终选择了巨人网络.6.7月主要是做系统复习.项目复盘.Leet ...

  3. poj3107（树的重心，树形dp）

    题目链接:https://vjudge.net/problem/POJ-3107 题意:求树的可能的重心,升序输出. 思路:因为学树形dp之前学过点分治了,而点分治的前提是求树的重心,所以这题就简单水 ...

  4. emacs 常用命令

    C stands for Ctrl and M stands for Alt  REFERENCE FORM EMACS TUTORIAL 表述不一定正确,仅供参考,主要是要多实践,一开始可能会不习惯 ...

  5. *#【Python】【基础知识】【运算符】【Python的几类运算符】

    Python的运算符分为以下几类: 算术运算符比较(关系)运算符赋值运算符逻辑运算符位运算符成员运算符身份运算符 以及需要考虑的:运算符优先级 一.算术运算符: 需要注意的,上图是Python 2.0 ...

  6. spring cloud微服务docker启动

    1. 背景 将系统拆分成微服务,一个系统可能拆分成十几个服务,服务太多会影响发布和管理,所以容器话之后易于管理和版本发布,鉴于此将spring cloud微服无docker容器化. 2.依赖环境 Ce ...

  7. uniapp如何使用阿里iconfont

    1.将iconfont中需要的图标,添加到购物车,然后添加到自己的项目.生成在线代码. 2.点击下载至本地.然后解压后复制 iconfont.css 文件到你的项目. 3.复制第一步生成的代码,替换i ...

  8. spring mvc 的配置 及interceptor filter listener servlet 配置

    创建 三个类 分别实现 Filter  ServletContextListener  HttpServlet 在springboot 启动类中@bean加入 2 ,实现 ServletContext ...

  9. 串的模式匹配，KMP算法

    串的模式匹配 现考虑一个常用操作,在字符串s(我们称为主串)中的第pos开始处往后查找,看在主串s中有没有和子串p相匹配的的,如果有,则返回字串p第一次出现的位置. 暴力求解 int Index(ch ...

  10. 【AC自动机】最短母串

    [题目链接] https://loj.ac/problem/10061 [题意] 给定 n 个字符串 S1-Sn,要求找到一个最短的字符串 T,使得这 n 个字符串都是 T 的子串. [题解] 类似于 ...