一、什么是ajax
1. 什么是ajax?
ajax不是一种开发语言，它是在现有的js/html/css样式基础上，实现在不重新加载整个页面的情况下，与服务器进行简单的数据交互，通过js操作DOM进行页面局部更新.
2. ajax的应用介绍：搜索建议，表单验证，点击下一页，等等等等
3. ajax概念:
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML （标准通用标记语言的子集）或者是 HTML。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
(了解1)、同步和异步
(了解2)、HTTP
二、ajax原理
1. ajax服务器交互原理?
简单来说通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面
2. ajax进行页面渲染
渲染： 就是向服务器请求数据后，把数据追加到页面中，这个过程就叫渲染
三、(了解)ajax和传统web渲染数据的区别和优缺点
1. 传统web渲染介绍
用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件，然后浏览器从head标签开始逐行解析HTML代码，
遇到link标签又会向服务器请求加载css文件，遇到script标签又会向服务器请求js文件
2. ajax渲染数据的优缺点
优点：
<1>.无刷新更新数据
AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，
并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
<2>.异步与服务器通信。
AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
优化了Browser（浏览器）和Server（服务端）之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
<3>.前端和后端负载平衡。
AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，
减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，
可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
<4>.基于标准被广泛支持。
AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。
随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，
为那些不支持JavaScript的用户提供替代功能。
<5>.界面与应用分离。
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、
也更加适用于现在的发布系统。
缺点：
<1>.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
<2>.对搜索引擎支持较弱。
ajax请求不利于搜索引擎优化，一般搜不到ajax添加到页面的信息！
<3>.破坏程序的异常处理机制。
<4>.违背URL和资源定位的初衷。
例如，我给你一个URL地址，如果采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
3. ajax与传统web渲染区别
(1). 客户端处理方式不同：传统web需要重新加载整个页面，才可以实现数据更新.
(2).提交方式不同，传统web向服务交互时，通过浏览提交整个页面，ajax通过javascript中的XMLHttpRequest对象提交.
(3).服务器响应不同:
传统的web返回的整个页面，而ajax只返回极少量的需要的数据.
1、 起本地服务 GO LIVE 2、 在本地自己写一个数据 txt 3 <1>.创建XMLHttpRequest对象 var xhr=new XMLHttpRequest(); <2>.对象初始化(配置) xhr.open("GET","url",true) // 打开txt文件 复制上面的路径 <3>.向服务器发送请求 xhr.send() <4>.等服务器响应变化 xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200) <5>.读取服务器返回的文本内容 var data=xhr.responseText; 4、把数据渲染到页面上
}
四、 ajax原生实现
1. 原生ajax案例演示
2. XMLHttpRequest对象，步骤
<1>.创建XMLHttpRequest对象
var xhr=new XMLHttpRequest();
<2>.对象初始化(配置)
xhr.open("GET","url",true)
<3>.向服务器发送请求
xhr.send()
<4>.等服务器响应变化
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200)
<5>.读取服务器返回的文本内容
var data=xhr.responseText;
}
3. 服务器返回响应码介绍
readyState为响应码，响应码共5个：
0:未初始化
1:向服务器发送请求
2:服务器已经接收请求
3:服务器正在处理数据
4:服务器准备就绪
4. 服务器http返回的状态码
http返回的状态码有以下几种
404:资源未找到
301:永久重定向
200:一切"ok"
403:拒绝访问
503:能与服务相连但web服务器不能正常工作
500:服务器错误
五、 如何发get和post请求
1. ajax使用get请求
xhr.open("GET","url",true)
2. ajax使用POST请求
xmlhttp.open("POST","url",true)
六、 json数据
1. javscript中的数组与对象表示方法
2. json数据文件方法及应用
3. 字符串与json类型相互转换
注：json文件不能写注释，字串必须用双引号，键和值都是双引号
JSON.parse() 将json字符串转换为json对象
JSON.stringify() 将json对象转换为json字符串
七、 原生ajax与json文件案例
1. 编写json文件表示学生信息数据
2. 原生ajax调用json文件并渲染到页面
jQuery中的ajax技术
1.$.ajax
语法：
$.ajax({
type:"get/post",//提交方式get,post 默认为get
url:"请求的url地址",
data:"要传递参数及值", //uname=李宝裤&usex=男
anysc:true,
success:function(ret){
//ret为服务器返回的数据
}
})
2.$.get()方法
语法：
$.get("url",{参数1:值,参数2:值},function(ret){
//ret为服务器返回数据
},"json")
3.$.post()方法
$.post("url",{参数1:值,参数2:值},function(ret){
//ret为服务器返回数据
},"json")
