一、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指令============ ...

随机推荐

c/c++笔试面试试题
C 试题(纯属转载) 1.求下面函数的返回值(微软) int func(x) { int countx = 0; while(x) { countx ++; ...
Linux ag命令
一.简介 Ag是用C++写的,搜索速度快,比grep更有效率. 二.安装 RHEL7+ rpm -Uvh http://download.fedoraproject.org/pub/epel/7/x8 ...
p4042 [AHOI2014/JSOI2014]骑士游戏
传送门分析我们发现对于一个怪物要不然用魔法代价使其无需考虑后续点要么用普通攻击使其转移到他所连的所有点上且所有边大于0 所以我们可以先将一个点的最优代价设为魔法攻击的代价之后我们倒着跑spfa求 ...
Luogu 4725 【模板】多项式对数函数
继续补全模板. 要求 $$g(x) = ln f(x)$$ 两边求导, $$g'(x) = \frac{f'(x)}{f(x)}$$ 然后左转去把多项式求导和多项式求逆的模板复制过来,就可以计算出$g ...
关于神经网络中的padding
参考:https://www.cnblogs.com/willnote/p/6746668.html
Mosquitto 单向SSL配置
Mosquitto 单向SSL配置摘自:https://blog.csdn.net/a_bcd_123/article/details/70167833 2017年04月14日 06:56:06 s ...
html5标签---不常用新标签的整理
状态标签 meter 用来显示已知范围的标量值或者分数值. value:当前的数值. min:值域的最小边界值.如果设置了,它必须比最大值要小.如果没设置,默认为0 max:值域的上限边界值.如果设置 ...
SciTE编写lua的快捷键整理
SciTE快捷键整理常用键整理: Ctrl + Q: 多行注释 Ctrl + L:删除一行或多行 Ctrl+T :和上一行换位置 Ctrl+D :复制高亮选中字符. 如果没有高亮选择字符, 则复制光 ...
APUE（7）---进程环境
一.main函数 C程序总是从main函数开始执行.main函数的原型是: int main(int argv, char *argv[]); 当内核执行C程序时,在调用main前先调用一个特殊的启动 ...
arch+win7 双系统启动引导
笔者的电脑之前已经安装了win7,安装完arch后电脑中存在两个系统,因此需要引导连个系统. 1. 在安装arch时,一般都会安装grub.如果没有安装,则参考arch wiki中 grub2一节安装 ...

JavaWeb学习笔记（二十）—— Ajax