Ajax
 
Ajax 是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。
 Ajax = 异步 JavaScript + XML。
 Ajax 是一种用于创建快速动态网页的技术。
 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
 
 
Ajax 用于创造动态性更强的应用程序
Ajax 可用来与数据库进行动态通信
Ajax 可用来与 XML 文件进行交互通信
 
 
创建 XMLHttpRequest 对象
 
XMLHttpRequest 是 Ajax 的基础。
 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
 
 
语法
 
variable = new XMLHttpRequest();
 
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject。
 
var xmlhttp;
if( window.XMLHttpRequest) {
	// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp = new XMLHttpRequest();
} else {
	// code for IE6, IE5
	xmlhttp = new ActiveXObject("Microsoft XMLHttp");
}
 
 
Ajax——向服务器发送请求
 
如需将请求发送至服务器，使用 XMLHttpRequest 对象的 open()和send()方法：
 
xmlhttp.open("GET", "test1.txt", true);
xmlhttp.send();
 
open(method, url, async)：规定请求的类型，URL 以及是否异步处理请求。
 
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
 （该文件可以是任何类型的文件，比如 .txt 和 .xml；或者服务器脚本文件，比如 .asp 和 .php（在传回响应之前，能够在服务器上执行任务））
async：true（异步）或 false（同步）
 
send(string) ：将请求发送到服务器
 
string：仅用于 POST 请求
 
 
GET 还是 POST？
 
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
 
在以下情况中，请使用 POST 请求：
 
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
 
为了得到的是缓存的结果，请向 URL 添加一个唯一的 ID。
 如果希望通过 GET 方法发送消息，请向 URL 添加信息。
 
 
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader()来添加 HTTP 头。然后在 send()方法中规定你希望发送的数据。
 
xmlhttp.open("post", "ajax-test.asp", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("fname = Bill & lname = Gates");
 
setRequestHeader(header, value)：向请求添加 HTTP 头。
 
header：规定头的名称
value：规定头的值
 
 
异步—— True or false?
 
通过 Ajax，JavaScript 无需等待服务器的响应，而是：
 
在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理
 
JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或者缓慢，应用程序会挂起或停止。
 当使用 async = false 时，请不要编写onreadystatechange函数——把代码放到send()语句后面即可。
 
用 JavaScript 写一个完整的 Ajax 代码并不复杂，但是需要注意：Ajax请求是异步执行的。
 
 
服务器响应
 
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
 responseText：获得字符串形式的响应数据
 
如果来自服务器的响应并非 XML -> 使用 responseText 属性
responseText 属性返回字符串形式的响应
 
responseXML：获得 XML 形式的响应数据
 
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析 -> 使用 responseXML 属性。
 
 
Ajax—— onreadystatechange 事件
 
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
 
XMLHttpRequest 对象的三个属性：
 
onreadystatechange：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState：存有 XMLHttpRequest 的状态。从0 到 4发生变化
 0：请求未初始化
 1：服务器连接已建立
 2：请求已接收
 3：请求处理中
 4：请求已完成，且响应已就绪
status：200：“OK”；404：未找到页面
 
在 onreadystatechange 事件中，规定当服务器响应已做好被处理的准备时所执行的任务。
 
当 readyState 等于4且状态为200时，表示响应已就绪。
 onreadystatechange 事件被触发5次（0~4），对应着 readyState 的每个变化。
 
 
使用 callback 函数
 
callback 函数是一种以参数形式传递给另一个函数的函数。
 如果你的网站上存在多个 Ajax 任务，那么你应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 Ajax 任务调用该函数。
 该函数调用应包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）。
 
function myFunction() {
	loadXMLDoc("ajax-info.txt", function() {
		if (xmlhttp.readyState == 4 & xmlhttp.status == 200) {
			document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
		}
	});
}
 
 
 
jQuery Ajax - ajax()方法
 
实例
 
$(document).ready(function() {
	$("#b01").click( function() {
	htmlobj = $.ajax({ url:" /jquery/test1.txt", async: false});
	$("#myDiv").html(html(htmlobj.responseText);
	});
});
 
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button id="b01" type="button">Change Context</button>
 
 
定义和用法
 
ajax() 方法通过 HTTP 请求加载远程数据。
 该方法是 jQuery 底层 Ajax 实现。简单易用的高层实现见 $.get，$.post等。
 
$.ajax()返回其创建 的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
 
最简单的情况下，$.ajax()可以不带任何参数直接使用。
 
注意： 所有的选项都可以通过$.ajaxSetup()函数来全局设置。
 
 
语法
 
jQuery.ajax([settings])
 
参数
描述
settings
可选。用于配置 Ajax 请求的键值对集合。
可以通过$.ajaxSetup()设置任何选项的默认值。
 
 
回调函数
 
如果要处理$.ajax()得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。
 
 
 
数据类型
 
$.ajax()函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是 XML，那么返回的结果就可以用普通的 XML 方法或者 jQuery 的选择器来遍历。如果见得到其他类型，比如 HTML，则数据就以文本形式来对待。
 
通过 dataType 选项还可以指定其他不同数据处理方式。除了单纯的 XML ，还可以指定 html、json、jsonp、script 或者text。
 
其中， text 和 xml 类型返回的数据不会经过处理。数据仅仅简单的将 XMLHttpRequest 的 responseText 或者 responseHTML 属性传递给 success 回调函数。
 
注意： 我们必须确保网页服务器报告的 MIME 类型与我们选择的 dataType 所匹配。比如说，XML的话，服务器端就必须声明 text/ xml 或者 application/ xml 来获得一致的结果。
 
如果指定为 html 类型，任何内嵌的 JavaScript 都会在 HTML 作为一个字符串返回之前执行。
类似地，指定 script 类型的话，也会先执行服务器端生成 JavaScript，然后再把脚本作为一个文本数据返回。
如果指定为 json 类型，则会把获取到的数据作为一个 JavaScript 对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，它首先尝试使用 JSON.parse()。如果浏览器不支持，则使用一个函数来构建。
 
JSON 数据是一种能很方便通过 JavaScript 解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用 jsonp 类型。
 使用这种类型的话，会创建一个查询字符串参数callback=?，这个参数会加在请求的 URL 后面。服务器端应当在 JSON 数据前加上回调函数名，以便完成一个有效的 JSONP 请求。
 如果要指定回调函数的参数名来取代默认的callback，可以通过设置$.ajax()的 jsonp 参数。
 
注意： JSONP 是 JSON 格式的扩展。它要求一些服务器端的代码来检测并处理查询字符串参数。
 
如果指定了 script 或者 jsonp 类型，那么当从服务器接收到数据时，实际上是用了 <script>标签而不是 XMLHttpRequest 对象。这种情况下，$.ajax()不再返回一个 XMLHttpRequest 对象，并且也不会传递事件处理函数，比如 beforeSend。
 
 
发送数据到服务器
 
默认情况下，Ajax 请求使用 GET 方法。如果要使用 POST方法，可以设定 type 参数值。这个选项也会影响 data 选项中的内容如何发送到服务器。
 
data 选项既可以包含一个查询字符串，比如 key1=value1&key2=value2，也可以是一个映射，比如{key1: 'value1', key2: 'value2'}。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置 processData 选项为 contentType 选项的值，用其他合适的 MIME 类型来取代默认的 application/ x-www-form-urlencoded。
 
 
高级选项
 
global 选项用于阻止响应注册的回调函数，比如 .ajaxSend，或者 ajaxError，以及类似的方法。这在有些时候很有用，比如发送的请求非常频繁且简短的时候，就可以在 ajaxSend 里禁用这个。
 
如果服务器需要 HTTP 认证，可以使用用户名和密码可以通过 username 和 password 选项来设置。
 
Ajax 请求是限时的，所以错误警告被捕获并处理后，可以用来提升用户体验。请求超时这个参数通常就保留其默认值，要不就通过 jQuery.ajaxSetup 来全局设定，很少为特定的请求重新设置 timeout 选项。
 
默认情况下，请求总会被发出去，但浏览器有可能从它的缓存中调取数据。要禁止使用缓存的结果，可以设置 cache 参数为 false。如果希望判断数据自从上次请求后没有更改过就报告出错的话，可以设置 ifModified 为 true。
 
scriptCharset 允许给 <script> 标签的请求设定一个特定的字符集，用于 script 或者 jsonp 类似的数据。当脚本和页面字符集不同时，这特别好用。
 
Ajax 的第一个字母是 asynchronous 的开头字母，这意味着所有的操作都是并行的，完成的顺序没有前后关系。$.ajax() 的 async 参数总是设置成true，这标志着在请求开始后，其他代码依然能够执行。强烈不建议把这个选项设置成 false，这意味着所有的请求都不再是异步的了，这也会导致浏览器被锁死。
 
$.ajax 函数返回它创建的 XMLHttpRequest 对象。通常 jQuery 只在内部处理并创建这个对象，但用户也可以通过 xhr 选项来传递一个自己创建的 xhr 对象。返回的对象通常已经被丢弃了，但依然提供一个底层接口来观察和操控请求。比如说，调用对象上的 .abort() 可以在请求完成前挂起请求。

1.1 什么是ajax:
 
 
 

  
Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新技术）。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。
 
 
 
 1.2Ajax的应用场景：
 
1.2.1 检查用户名是否已被注册：
 
很多站点的注册页面都具被自动检测用户名是否存在的友好提示，该功能整体页面并没有刷新，但仍然可以异步与服务器进行数据交换，查询用户输入的用户名是否存在数据库。
 
 
 
 
1.2.2 省市级联下拉框联动：
 
很多站点都存在输入用户地址的操作，在完成地址输入时，用户所在的省份是下拉框，当选择不同的省份时会出现不同市区的选择，这就是最常

注重版权，转载请注明原作者和原文链接
 作者：码农BookSea
 原文链接：https://editor.csdn.net/md?articleId=106881795
 
 
 
 
 
0.前言
 
Ajax
 这个术语源自描述从基于 Web 的应用到基于数据的应用。
 Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
 使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。
 Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
 Ajax可使因特网应用程序更小、更快，更友好。
 AJAX 工作原理
 Ajax 是一种独立于 Web 服务器软件的浏览器技术。　Ajax 基于下列 Web 标准：
 JavaScript、XML、HTML与 CSS 在 Ajax 中使用的 Web 标准已被良好定义，并被所有的主流浏览器支持。Ajax 应用程序独立于浏览器和平台。
 Web 应用程序较桌面应用程序有诸多优势；它们能够涉及广大的用户，它们更易安装及维护，也更易开发。
 不过，因特网应用程序并不像传统的桌面应用程序那样完善且友好。通过 Ajax，因特网应用程序可以变得更完善，更友好。
 
1.认识Ajax
 

 Ajax = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
 Ajax 不是新的编程语言，而是一种使用现有标准的新方法。
 Ajax 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下，说的简单点就是Ajax可以实现局部刷新。
 举个栗子：
 （如百度地图就应用了Ajax，查询地点时，不用刷新整个百度地图页面，只更新有需要的地方。这就叫做局部刷新）
 
2.使用Ajax的好处
 
1.无刷新——不刷新整个页面，只刷新局部。
  无刷新的好处
  只更新部分页面，有效利用带宽
  提供连续的用户体验
  提供类似 C/S 的交互效果，操作更方面
 
2.异步与服务器通信
 　　使用异步的方式与服务器通信，不打断用户的操作
 　　
 3.前端与后端负载均衡
 　　将一些后端的工作移到前端，减少服务器与带宽的负担
 　　
 4.基于规范被广泛支持
 　　不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。
 　　
 5.界面与应用分离
 　　Ajax使得界面与应用分离，也就是数据与呈现分离
 
3.Ajax的工作原理
 
Ajax的工作原理相当于在用户和服 务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给 Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
 （图片转载至：https://www.runoob.com/ajax/ajax-intro.html）
 
 
Ajax首先会向服务端发送一个请求，然后调用一个服务（回调函数），接着返回结果。这样使客户端和服务端发生了少量的数据交换，ajax实现局部页面的更新，从而减少了服务端的压力。
 
 
4.传统 Web 与 Ajax 的差异
 
 
 
 
 
实现 Ajax 的过程分为发送请求和处理响应两个步骤：
 
 
发送请求分为 GET 和 POST 方法。
响应有 responseText 和 responseXML 两种方式。
 
 
5.Ajax–JavaScript实现
 

 
 　Get方式-Demo：
 
Get方式

window.onload=function()
{
    document.getElementById("ok").onclick=function(){
        var xhr=createXmlHttpRequest();//获取XmlHttpRequest对象
        
        xhr.onreadystatechange=function(){//回调函数
            if(xhr.readyState==4){//回调状态
                if(xhr.status==200 || xhr.status==304)//服务器状态吗
                {
                    var date=xhr.responseText;//服务器返回数据
                    alert(date);
                }
            }
        };
        var id="A001";
        alert(id);
        xhr.open("GET","../testGetServelet?id="+id,true);//1、发送方式2、页面路径，3、请求是否异步，默认为true
        xhr.send(null);//发送数据--get方式，这里不用写数据，即使写了数据服务器端也无法接收
    };
    
    function createXmlHttpRequest(){
           var xmlHttp;
           try{    //Firefox, Opera 8.0+, Safari
           xmlHttp=new XMLHttpRequest();
            }catch (e){
                   try{    //Internet Explorer
                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                   }catch (e){
                      try{
                          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                      }catch (e){}  
           }
    }
   return xmlHttp;
 }

};
 
Post方式-Demo：
 
Post方式

window.onload=function(){
    document.getElementById("ok").onclick=function(){
        var xhr=createXmlHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4)
            {
                if(xhr.status==200 || xhr.status==304)
                {
                    var data=xhr.responseText;
                    alert(data);
                }
            }
        };

        xhr.open("post","../testGetServelet",true);
        //如果是POST请求方式，设置请求首部信息
         xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
         xhr.send("a=1&b=2");
    };

    function createXmlHttpRequest(){
           var xmlHttp;
           try{    //Firefox, Opera 8.0+, Safari
           xmlHttp=new XMLHttpRequest();
            }catch (e){
                   try{    //Internet Explorer
                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                   }catch (e){
                      try{
                          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                      }catch (e){}
           }
    }
   return xmlHttp;
 }

};
 
讲完JS实现Ajax 接下来讲讲JQ实现Ajax
 
6.Ajax–jquery实现
 
使用 javascript 实现 ajax 有很多缺点…方法、属性、常用值较多不好记忆，步骤
 繁琐，浏览器兼容问题。
 jQuery 提供了一些常用的 ajax 方法：$.ajax()、$.get() 、$.post()、$.getJSON()、
 load()。相比 js 实现，更加简洁和方便。
 
$.ajax()实现 Ajax 示例代码：
 
<script src="script/jquery-1.12.4.js" type="text/javascript"></script> <script type="text/javascript">
function validate() {
var uname = $("#uname").val();
if (uname == null || uname == "") {
$("#msg").html("用户名不能为空！");
} else {
$.ajax({
url : "dologin.jsp",
type : "get",
data:{"uname":uname},
dataType : "text",
success : function(result) {
if ($.trim(result) == "true") {
$("#msg").html("用户名已被使用！");
} else {
$("#msg").html("用户名可以使用！");
}
},
error : function() {
alert("用户名验证拾出现错误，请联系管理员！");
}
});
}
};
</script>
 
$.get()
 语法格式：
 
$.get(url ,data,success(resp,status,xhr), dataType);
 怕大家看不懂参数是什么意思，给大家放张常用属性参数表，看了之后一目了然：
 
 
 
<script src="script/jquery-1.12.4.js" type="text/javascript"></script> <script type="text/javascript">
function validate(){
var uname = $("#uname").val();
if(uname==null || uname==""){
$("#unameDiv").html("用户名不能为空！");
}else{
$.get('dologin.jsp','uname='+uname,function(result){
if($.trim(result) == "true"){
$("#unameDiv").html("用户名已被使用！");
 }else{
$("#unameDiv").html("用户名可以使用！");
 } 
}
);
} }
</script> <body> <form action="" id="form1"> <table> <tr><td>用 户 名：</td> <td><input type="text" name="uname" id="uname"
onblur="validate();" />&nbsp;<font
color="#c00fff">*</font></td> <td><div id="unameDiv" style="display: inline"></div>
</td>
</tr>
</table>
</form>
</body>
 
$.post()
 
语法格式：
 $.post(url,data,success(resp,status,xhr), dataType);
 （实现方式与get类似，只是把get改换成post，这里不再赘述~~）
 
 load()
 
语法格式：
 $(selector).load(url ,data,function(result, status, xhr));
 
<script type="text/javascript">
function validate(){
var uname = $("#uname").val();
if(uname==null || uname==""){
$("#unameDiv").html("用户名不能为空！");
}else{
$("#unameDiv").load('lgoin.jsp','uname='+uname);
} }
</script> <body> <form action="" id="form1" > <table> <tr><td>用 户 名：</td> <td>
<input type="text" name="uname" id="uname"
onblur="validate();" />&nbsp;<font color="#c00fff">*</font>
</td> <td><div id="unameDiv" style="display: inline"></div>
</td>
</tr>
</table>
</form>
</body>
 
 
今天Ajax相关知识就先讲到这里吧~~
 
 
 
以上就是本篇文章的有关内容
 
 
骚等别划走，恰饭时间~
 
 
给大家放波福利，博主最近在搞阿里云推广，
 
活动折扣价：全网最低价87元/年，261元/3年，比学生9.9每月还便宜（舒服的一匹）
 新用户可以入手试试，有一台属于自己的服务器，前期用来部署和学习都很方便
 
阿里云 【点击购买】
 
 
各位看官老爷。要是觉得看了之后有收获，感觉写的有点东西，劳烦点个免费的赞鼓励一下博主
 
 
 
白嫖不好，创作不易。各位的点赞就是我创作的最大动力，如果我有哪里写的不对，欢迎评论区留言进行指正，我们下篇文章见！
 
 

AJAX
 
AJAX 不是一种新的编程语言而是一种使用现有标准的新方法，与服务器交换数据并更新部分网页的新技术（不用重新加载整个界面）。
 
AJAX = 异步JavaScript和xml。
 
1.创建AJAX对象
 
XMLHttpRequest 对象用于在后台与服务器交换数据
 
var xhr = new XMLHttpRequest();
 
老版本的ie
 
var xhr  = new ActiveXObject("Microsoft.XMLHTTP");
 
用来兼容老版本ie和新版本浏览器的xhr对象
 
var xhr 
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest()
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
 
2. AJAX请求
 
方法：
 
open(method,url,async)						规定请求的类型、URL 以及是否异步处理请求
											method：请求的类型；GET 或 POST
											url：文件在服务器上的位置
											async：true（异步）或 false（同步）

send(string)
						  					将请求发送到服务器。
											string：仅用于 POST 请求
 
setRequestHeader(header,value); 向请求添加http头，header：规定头的名称；value：规定头的值。
 
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true
 
3.AJAX服务器响应
 
responseTest			获得字符串形式的响应数据
reponseXML				获得XML行营的响应数据
 
4.事件
 
onreadystatechange		 存储函数，当readyState属性改变时，就会调用该函数
readyState				 存有xhr的状态，有5个参数：
														0：请求未初始化
														1：服务器连接已建立
														2：请求已接受
														3：请求处理中
														4：请求已完成，且响应已就绪
													
status					200： " Ok "  ; 404未找到界面