这里写目录标题

AJAX引入
异步请求和同步请求
- 什么是同步交互
- - 优点
  - 缺点
- 什么是异步交互
- - 优点
  - 缺点
AJAX介绍
AJAX关键技术
案列
原生JS实现异步的常见问题及解决方案
post请求发送ajax
ajax请求的状态
响应类型
实现二级联动
AJAX结合jquery实现
jQuery实现AJAX的其他写法
- $.load()
- $.get()
- $.post()
- $.getScript()
- $.getJSON()
跨域
- 什么是跨域?
- 通过:dataType:'jsonp'属性实现跨域请求
- 通过 jsonp:'callback',属性简化回调函数处理
通过getJson方实现跨域请求
使用JSONP 进行跨域的缺点：

AJAX引入

异步请求和同步请求

什么是同步交互

首先用户向HTTP服务器提交一个处理请求。接着服务器端接收到请求后，按照预先编写好的程序中的业务逻辑进行处理，比如和数据库服务器进行数据信息交换。最后，服务器对请求进行响应，将结果返回给客户端，返回一个HTML在浏览器中显示，通常会有CSS样式丰富页面的显示效果。

优点

可以保留浏览器后退按钮的正常功能。在动态更新页面的情况下，用户可以回到前一个页面状态，浏览器能记下历史记录中的静态页面,用户通常都希望单击后退按钮时，就能够取消他们的前一次操作，同步交互可以实现这个需求.

缺点

1同步交互的不足之处，会给用户一种不连贯的体验，当服务器处理请求时，用户只能等待状态，页面中的显示内容只能是空白。
2因为已经跳转到新的页面,原本在页面上的信息无法保存,好多信息需要重新填写

什么是异步交互

指发送一个请求,不需要等待返回,随时可以再发送下一个请求，即不需要等待。在部分情况下，我们的项目开发中都会优先选择不需要等待的异步交互方式。将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。异步不用等所有操作等做完，就相应用户请求。即先相应用户请求，然后慢慢去写数据库，用户体验较好

优点

1前端用户操作和后台服务器运算可以同时进行,可以充分利用用户操作的间隔时间完成运算
2页面没有跳转,响应回来的数据直接就在原页面上,页面原有信息得以保留

缺点

可能破坏浏览器后退按钮的正常行为。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记录的始终是当前一个的静态页面。用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在AJAX这样异步的程序，却无法这样做

AJAX介绍

AJAX 即
“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

AJAX关键技术

使用CSS构建用户界面样式,负责页面排版和美工
使用DOM进行动态显示和交互,对页面进行局部修改
使用XMLHttpRequest异步获取数据
使用JavaScript将所有的元素绑定在一起

AJAX的最大的特点: 异步访问（速度快）,局部刷新(用户体验度高)

案列

原生JS实现异步的常见问题及解决方案

早期的浏览器不支持直接 new XMLHTTPReuquest 可以通过new ActiveXObject(“Microsoft.XMLHTTP”);

open底层

post请求发送ajax

ajax请求的状态

因为ajax的请求的步骤太多，导致的就是中间的如果说出错误了，那我们是不知道的状态

XMLHTTPequest的几种状态
readyState代表请求的状态或者形情
0:请求没有发出(在调用open()之前)
1:请求已经建立但是还没有发出(调用send()之前)
2:请求已经发出正在处理之中(这里通常可以从响应的到内容头部)
3请求已经处理,响应中有数据可用,但是服务器还没有完成响应
4:响应已经完成,可以访问服务器响应并使用它
在AJAX中有以上五种状态,但是通常只使用状态4
status代表响应状态码
200
404

可以通过状态值的改变，来执行程序

响应类型

纯文本格式

如果前台返回的是一个对象，那么在使用纯文本就不合适了

这个时候可以借用json这个格式

可以通过修改tostring方法

返回返回前台的仍是一个字符串的形式。需要转换

但是修改同string这种方式太过麻烦，我们也可以这样

如果响应的是xml格式

实现二级联动

AJAX结合jquery实现

jQuery实现AJAX的其他写法

$.load()

jQuery load() 方法是简单但强大的 AJAX 方法，load() 方法从服务器加载数据，并把返回的数据放入被选元素中。默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式,
语法为:

$(selector).load(URL,data,callback);

$.get()

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
语法为
$.get(url,[data],[callback],[type])

url: URL地址
data:待发送参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default

$.post()

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
语法为:
$.post(url,[data],[callback],[type])
参数的含义为:
url: URL地址
data:待发送参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default

$.getScript()

$.getScript()可以实现通过 HTTP GET 请求载入并执行一个 JavaScript 文件的效果
语法为
$.getScript(url,[callback])
参数的含义为
url:URL地址
callback:载入成功时回调函数。

$.getJSON()

JSON是一种较为理想的数据传输格式，它能够很好的融合与JavaScript或其他宿主语言，并且可以被JS直接使用。使用JSON相比传统的通过 GET、POST直接发送“裸体”数据，在结构上更为合理，也更为安全。至于jQuery的getJSON()函数，只是设置了JSON参数的 ajax()函数的一个简化版本。语法为:
$.getJSON(
url, //请求URL
[data], //传参，可选参数
[callback] //回调函数，可选参数
　);

跨域

什么是跨域?

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

通过:dataType:'jsonp’属性实现跨域请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="js/jquery-1.12.3.min.js"></script><script>function testAjax(){$.ajax({url:"http://127.0.0.1:8080/ajaxDemo3/servlet9",type:"get",dataType:'jsonp',data:{username:'sss',functionName:'fun1'},})}function fun1(data){console.info(data)}</script>
</head>
<body><div id="d1"></div><input id="i1" value="按钮" type="button" onclick="testAjax()">
</body>
</html>

@WebServlet("/servlet9")
public class Servlet9 extends HttpServlet{@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String username = req.getParameter("username");System.out.println(username);String functionName=req.getParameter("functionName");System.out.println(functionName);User user1 =new User(1,"张三1","123456","男");User user2 =new User(1,"张三2","123456","男");User user3 =new User(1,"张三3","123456","男");User user4 =new User(1,"张三4","123456","男");User user5 =new User(1,"张三5","123456","男");List<User> users =new ArrayList<>();Collections.addAll(users,user1,user2,user3,user4,user5);Gson gson =new Gson();String json = gson.toJson(users);resp.setCharacterEncoding("UTF-8");resp.setContentType("text/javaScript;charset=UTF-8");resp.getWriter().print(functionName+"("+json+")");}
}

通过 jsonp:‘callback’,属性简化回调函数处理

通过 jsonp:’callback’,实现自动处理回调函数名,相当于在url地址栏最后后拼接一个callback=函数名,后台自动根据这个函数名处理JS脚本,jQuery也会根据这函数名自动在前端处理回调函数,这样我们直接在success方法中接收返回的数据即可,可以不用自己去自己定义回调函数.后台获取参数时,参数名要要和jsonp:后面的函数名保持一致

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="js/jquery-1.12.3.min.js"></script><script>function testAjax(){$.ajax({url:"http://127.0.0.1:8080/ajaxDemo3/servlet9",type:"get",dataType:'jsonp',jsonp:'aaa',data:{username:'sss',pwd:'阿萨德饭'},success:function(data){console.info(data)},error:function(){console.info("失败")}})}</script>
</head>
<body><div id="d1"></div><input id="i1" value="按钮" type="button" onclick="testAjax()"></body>
</html>

@WebServlet("/servlet9")
public class Servlet9 extends HttpServlet{@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String username = req.getParameter("username");System.out.println(username);String callback=req.getParameter("aaa");System.out.println(callback);User user1 =new User(1,"张三1","123456","男");User user2 =new User(1,"张三2","123456","男");User user3 =new User(1,"张三3","123456","男");User user4 =new User(1,"张三4","123456","男");User user5 =new User(1,"张三5","123456","男");List<User> users =new ArrayList<>();Collections.addAll(users,user1,user2,user3,user4,user5);Gson gson =new Gson();String json = gson.toJson(users);resp.setCharacterEncoding("UTF-8");resp.setContentType("text/javaScript;charset=UTF-8");resp.getWriter().print(callback+"("+json+")");}
}

通过getJson方实现跨域请求

getJSON方法是可以实现跨域请求的,在用该方法实现跨域请求时,在传递参数上应该注意在url后拼接一个callback=?,jQuery会自动替换?为正确的回调函数名,我们就可以不用单独定义回调函数了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="js/jquery.min.js"></script><script>function testAjax(){$.getJSON("http://127.0.0.1:8080/ajaxDemo3/servlet9?jsoncallback=?",{username:'sss'},function(data){console.info(data)   })}</script>
</head>
<body><div id="d1"></div><input id="i1" value="按钮" type="button" onclick="testAjax()">
</body>
</html>

@WebServlet("/servlet9")
public class Servlet9 extends HttpServlet{@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String username = req.getParameter("username");System.out.println(username);String callback=req.getParameter("jsoncallback");System.out.println(callback);User user1 =new User(1,"张三1","123456","男");User user2 =new User(1,"张三2","123456","男");User user3 =new User(1,"张三3","123456","男");User user4 =new User(1,"张三4","123456","男");User user5 =new User(1,"张三5","123456","男");List<User> users =new ArrayList<>();Collections.addAll(users,user1,user2,user3,user4,user5);Gson gson =new Gson();String json = gson.toJson(users);resp.setCharacterEncoding("UTF-8");resp.setContentType("text/html;charset=UTF-8");resp.getWriter().print(callback+"("+json+")");}
}

使用JSONP 进行跨域的缺点：

1、书写使用的时候比较麻烦
2、Jsonp只可以解决get请求的跨域，post 的跨域是解决不了

Ajax：异步JavaScript和XML的笔记略解，不作为知识参考相关推荐

AJAX (异步 javascript 和 xml)
用 form 可以发请求,但是会刷新页面或新开页面用 a 可以发 get 请求,但是也会刷新页面或新开页面用 img 可以发 get 请求,但是只能以图片的形式展示用 link 可以发 get ...
[Ajax]异步的 JavaScript 和 XML：Ajax入门教程（整理）
首先先来解释一下什么是 AJAX . 简单来说AJAX = 异步 JavaScript 和 XML, 是一种用于创建快速动态网页的技术. 它不是一种编程语言,而是一种规范. Ajax的主要功能是:通过 ...
雷神javaweb缺失--》Ajax：异步 JavaScript 和 XML
AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 通过 AJAX,JavaScript 无需等待服务器的响应,而是: 在等待服 ...
AJAX工作原理及其优缺点 1.什么是AJAX? AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页
参考文章:https://www.cnblogs.com/SanMaoSpace/archive/2013/06/15/3137180.html AJAX工作原理及其优缺点 1.什么是AJAX? AJ ...
14 Flask mega-tutorial 第14章 Ajax（百度翻译API）：异步JavaScript和XML的缩写（Asynchronous Javascript And XML）
如需转载请注明出处. win10 64位.Python 3.6.3.Notepad++.Chrome 67.0.3396.99(正式版本)(64 位) 注:作者编写时间2018-03-07,linux ...
【JavaScript】AJAX总结（异步JavaScript和XML）
AJAX介绍通过 AJAX,你可以创建更好.更快以及更友好的 WEB 应用程序. AJAX 基于 JavaScript 和 JavaScript的XMLHttpRequest对象. AJAX 应用程 ...
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）
Ajax技术出现的意义: 向服务器请求额外的数据而无序卸载页面,带来更好的用户体验,页面无刷新技术. 1.Ajax的核心是XMLHttpRequest对象(简称XHR),创建XHR对象如下兼容处理, ...
AJAX(Asynchronous JavaScript And XML，异步JavaScript + XML)
AJAX,最初是由Adaptive Path公司的Jesse James Garrett提出来的.AJAX的工作原理相当于在用户和服务器之间加了-个中间层,使用户操作与服务器响应异步化. Jesse ...
Ajax→异步的JavaScript和XML、HTTP请求响应、Ajax简介同步异步、XMLHttpRequest类的方法及属性、原生Ajax、Koa实现Ajax、接口文档、浏览器同源策略、反向代理
浏览器服务器 HTTP请求响应数据库后端语言 Ajax简介同步异步 Koa前端框架 XMLHttpRequest类的方法及属性原生Ajax Koa实现Ajax JSON DOM 接口文档浏览器同 ...
js(三) ajax异步局部刷新技术底层代码实现
ajax 异步 javaScript and xml 开发五步骤: 1. 创建对象 XMLHttpRequest(chrome,firefox) ie... jquery 2. 找到连接, http的 ...

Ajax：异步JavaScript和XML的笔记略解，不作为知识参考