1.概念
百度百科：Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术
W3C：AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 不是新的编程语言，而是一种使用现有标准的新方法
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
局部刷新、异步加载
2.使用场景：百度地图， 用户注册校验等
3.同步与异步
同步：发一次请求，需要等待服务器响应结束，然后才能发生第二次，每次刷新都是整个页面刷新
异步：发一次请求，无需等待服务器的响应，可以直接发送第二次请求。使用js来接收服务器响应，然后使用js进行局部刷新
4.优缺点
优点： 不需要插件、用户体检极佳、提示web程序的性能、减轻服务器和宽带的负担
缺点： 没有了前进后台功能
5.ajax简单使用
ajax核心对象：XMLHttpRequest
实现步骤：
第一步：创建XMLHttpRequest对象
第二步：打开与服务器的连接
第三步：发送请求
第四：处理响应
HTML页面js代码:
window.onload=function(){ ???????var but =document.getElementById("but"); ???????????but.onclick = ?function(){ ???????????//第一步(创建XMLHttpRequest对象) ???????????var xmlHR = new XMLHttpRequest(); ???????????// 第二步(打开与服务器的连接) ???????????var method = "get" ; ???????????var url ???= "/JQuery_demo2/ajax1.do?name=jack" ??; ???????????xmlHR.open(method, url); ???????????// 第三步(发送请求) ???????????xmlHR.send(); ???????????//第四步(处理响应) ???????????xmlHR.onreadystatechange = function(){ ???????????????if(xmlHR.readyState == 4){ ???????????????????if(xmlHR.status == 200){ ???????????????????????var text= xmlHR.responseText; ???????????????????????alert(text); ???????????????????}}}}}服务器servlet代码:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ???????String method = request.getMethod(); ???????System.out.println("请求 ??????：" + method); ???????String name = request.getParameter("name"); ???????System.out.println("参数 ????：" + name); ???response.setContentType("text/html;charset=utf-8"); ???????PrintWriter out = response.getWriter(); ???????out.write("响应成功!"); ???????out.close(); ???}4. jquery的ajax
①$.ajax(url,[settings])
最底层的ajax请求，功能是最完善的
<script type="text/javascript"> ???????$(function(){ ???????????$("input").click(function(){ ???????????????/* ???$.ajax(url,[settings]) ???????????????????$.ajax([settings]) ???????????????????settings参数 设置所有的参数 ???????????????????????url ????: 发送请求的地址 ???????????????????????data ???: 发送到服务器的数据，请求参数 ???????????????????????type ???：请求方式(get、post) ???????????????????????success ???：成功的回调函数 ????success(data, textStatus, jqXHR) ???????????????????????dataType：服务器返回的数据类型 ???????????????????????????"xml": 返回 XML 文档，可用 jQuery 处理。 ???????????????????????????"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。 ???????????????????????????"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。‘‘‘注意：‘‘‘在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载) ???????????????????????????"json": 返回 JSON 数据 。 ???????????????????????????"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 ???????????????????????????"text": 返回纯文本字符串*/ ???????????????$.ajax({ ???????????????????"url" ?????????: "/JQuery_demo2/ajax2.do" , ???????????????????"data" ????????: {"username":"admin1","password":"123456"}, ???????????????????"type" ????????: "post", ???????????????????"dataType" ???: "text", ???????????????????"success" ???: ?function(data){ ???????????????????????alert(data); ???????????????????} ???????????????}); ???????????}) ???????}); ???</script>②$.get(url,[data],[fn],[type])
以get发送请求
<script type="text/javascript"> ???????$(function(){ ???????????$("input").click(function(){ ???????????/* ???$.get() ???????????????格式 ?$.get(url,[data],[callback],[type]) ???????????????????参数： ???????????????????????url:待载入页面的URL地址 ???????????????????????data:待发送 Key/value 参数。 ???????????????????????callback:载入成功时回调函数。 ???????????????????????type:返回内容格式，xml, html, script, json, text, _default。 ???????????????????请求只能是get请求，不适合发送中文数据 ???????????*/ ???????????????$.get( ???????????????????"/JQuery_demo2/ajax2.do", ???????????????????{"username":"jack","password":"lovelucy"}, ???????????????????function(data){ ???????????????????????alert(data); ???????????????????}, ???????????????????"text" ???????????????) ???????????????}) ???????}); ???</script>③$.post(url,[data],[fn],[type])
以post发送请求
<script type="text/javascript"> ???????$(function(){ ???????????$("input").click(function(){ ???????????/* ???$.post(url, [data], [callback], [type]) ???????????????????参数： ???????????????????????url:发送请求地址。 ???????????????????????data:待发送 Key/value 参数。 ???????????????????????callback:发送成功时回调函数。 ???????????????????????type:返回内容格式，xml, html, script, json, text, _default。 ???????????????????????发生post请求 ???????????*/ ???????????????$.post( ???????????????????"/JQuery_demo2/ajax2.do", ???????????????????{"username":"lucy","password":"lovetom"}, ???????????????????function(data){ ???????????????????????alert(data); ???????????????????}, ???????????????????"text" ???????????????) ???????????}) ???????}); ???</script>Ajax简介
原文地址：https://www.cnblogs.com/jjqq0921/p/10193792.html