1.Ajax的概念
Ajax是一种在无需重新加载整个网页（刷新页面）的情况下，能够更新部分网页的技术。
Ajax的全称是AsynchronousJavaScript and XML，即异步JavaScript+XML。它并不是新的编程语言，而是几种原有技术的结合体。
2.Ajax的优势
==(一) 无刷新更新数据。==
??Ajax最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
==(二) 异步与服务器通信==
??Ajax使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
==(三) 前端和后端负载平衡==
??Ajax可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，Ajax的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
3.Ajax的工作原理
??Ajax的工作原理相当于在用户和服务器之间加了一个中间层（Ajax引擎），使用户操作与服务器响应异步化。
??Ajax其核心有++JavaScript、XMLHTTPRequest、DOM++对象组成，通过XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。
4.扩展:同步和异步
异步：同时执行，也叫并发
同步：按步骤顺序执行，一条一条执行
5.扩展：程序、进程和线程
程序是指令的集合,
执行的程序称之为进程,
执行的个数是线程.
6.编写步骤
ajax请求：
1.创建Ajax对象
2.连接服务器
3.发送请求
4.接收返回 (Ajax返回的是字符串)
js:function ajax(url,fnWin,fnFaild){ ???//1.买手机（创建ajax对象） ???var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");//XMLHttpRequest ,IE8一下不兼容 ???//2.拨号（与服务器建立连接） ???xhr.open("GET",url,true); ???//第一个参数：传递方式GETorPOST ???//第二个参数：请求的URL地址 ???//第三个参数：是否异步 true : 异步 ??false : 同步 ??默认:true ???//3.说话（发送请求） ???xhr.send(); ???//4.听（接收返回） ???xhr.onreadystatechange = function(){ ???????if(xhr.readyState === 4){ ???????????if(xhr.status === 200){ ???????????????if(typeof fnWin == ‘function‘){ ???????????????????fnWin(xhr.responseText); ???????????????} ???????????????????????????}else{ ???????????????if(typeof fnFaild == ‘function‘){ ???????????????????fnFaild(); ???????????????} ???????????} ???????} ???}}html:<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???</head> ???<body> ???????<p>通过ajax，向服务器请求数据，将服务器的数据放到div中</p> ???????<input type="button" name="btn" id="btn" value="请求数据" /> ???????<div id="box"> ???????????????????</div> ???????<script type="text/javascript" src="js/ajax.js" ></script> ???????<script type="text/javascript"> ???????????var oBtn = document.getElementById("btn"); ???????????var oDiv = document.getElementById("box"); ???????????oBtn.onclick = function(){ ???????????????ajax(‘abc1.jpg‘,function(str){ ???????????????????oDiv.innerHTML = str; ???????????????},function(){ ???????????????????oDiv.innerHTML = "服务器上没有您请求的数据！"; ???????????????}) ???????????} ???????</script> ???</body></html>ajax面向对象的封装
var ajax = {};ajax.get = function(url,fn){ ???var xhr = new XMLHttpRequest(); ???xhr.open(‘get‘,url); ???xhr.send(); ???xhr.onreadystatechange = function(){ ???????if(xhr.readyState === 4 && xhr.status === 200){ ???????????if(typeof fn === ‘function‘){ ???????????????fn(xhr.responseText); ???????????} ???????} ???}}ajax.post = function(url,data,fn){ ???var xhr = new XMLHttpRequest(); ???xhr.open(‘post‘,url); ???//设置请求头 ???xhr.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf-8"); ???xhr.send(data); ???xhr.onreadystatechange = function(){ ???????if(xhr.readyState === 4 && xhr.status === 200){ ???????????if(typeof fn === ‘function‘){ ???????????????fn(xhr.responseText); ???????????} ???????} ???}}(三) Open方法：
- URL是相对于当前页面的路径，也可以使用绝对路径
- Open方法不会向服务器发送真正请求，它相当于初始化请求并准备发送。
- 只能向同一个域中使用相同协议和端口的URL发送请求，否则会因为安全原因报错
(四) Post传参：
发送表单数据
==xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=utf-8");==
(五) 请求状态监控
==1. Onreadystatechange(状态改变事件)==
++1) readyState属性：请求状态++
a) 0 ： 请求未初始化（还没有调用open（））
b) 1 ： 请求已经建立，但是还没有发送（还没有调用send()）
c) 2 ： 请求已发送，正在处理中（通常现在可以从响应中获取内容头）
d) 3 ；请求在处理中，通常响应中已有部分数据可用了，但是服务器还不有完成响应的生成。
e) ++==4==： 响应已完成，您可以获取并使用服务器的响应了。++
2) ==Status属性 ： 请求结果==
扩展：
201-206都表示服务器成功处理了请求的状态代码，说明网页可以正常访问。
==200（成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。==
4XX表示请求可能出错，会妨碍服务器的处理。
==404（未找到）服务器找不到请求的网页。==
一、 JS解析JSON
(一) ==Eval()方法==：解析JSON数据的最常用方法是使用javascript的eval()方法，代码如下 ：
function toJson(str){ ??var json = eval(‘(‘ + str + ‘)’); ??return json;}++该方法存在性能和安全方面的问题，不建议使用。++
(二) ==JSON.parse()方法==
这种方法只支持IE8/Firefox3.5+/Chrome4/Safari4/Opera10以上版本，这些浏览器都已经接近W3C标准，默认实现了toJSON方法。代码如下：
function toJson(str){ ????return JSON.parse(str);}(三) ==New Function方法==：代码如下
function toJson(str){ ???var json = (new Function(“return” + str))(); ???return json;}二、 局部数据刷新
(一) 请求并显示静态TXT文件
- 字符集编码（三个按钮分别读取三个不同的文件并存入div中）
- 缓存、阻止缓存（?t=newDate().getTime()）
(二) 动态数据：请求json文件
分页
三、 事件委托的应用
四、 前后端分离
200（成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
19、AJAX
原文地址：https://www.cnblogs.com/zhongchao666/p/9275574.html