标签：异步 XMLHttpRequest 请求 json xhr ajax 服务器 页面
一、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 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
二、ajax原理
1. ajax服务器交互原理
简单来说通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面
2. ajax进行页面渲染
渲染： 就是向服务器请求数据后，把数据追加到页面中，这个过程就叫渲染
三、ajax和传统web渲染数据的区别和优缺点
1. 传统web渲染介绍
用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，
服务器返回html文件，然后浏览器从head标签开始逐行解析HTML代码，
遇到link标签又会向服务器请求加载css文件，遇到script标签又会向服务器请求js文件
2. ajax渲染数据的优缺点
优点：
- 无刷新更新数据,
ajax最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，
并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
- 异步与服务器通信
ajax使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
优化了Browser（浏览器）和Server（服务端）之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
- 前端和后端负载平衡
ajax可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，
减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，
可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
- 基于标准被广泛支持
ajax基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。
随着ajax的成熟，一些简化ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，
为那些不支持JavaScript的用户提供替代功能。
- 界面与应用分离
ajax使Web中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。
缺点：
-
.ajax干掉了Back和History功能，即对浏览器机制的破坏。
-
对搜索引擎支持较弱
ajax请求不利于搜索引擎优化，一般搜不到ajax添加到页面的信息！
-
破坏程序的异常处理机制。
-
违背URL和资源定位的初衷。
例如，我给你一个URL地址，如果采用了ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
四、ajax与传统web渲染区别
- 客户端处理方式不同：传统web需要重新加载整个页面，才可以实现数据更新.
- 提交方式不同，传统web向服务交互时，通过浏览提交整个页面，ajax通过javascript中的XMLHttpRequest对象提交.
- 服务器响应不同:传统的web返回的整个页面，而ajax只返回极少量的需要的数据.
五、使用ajax
1，创建XMLHttpRequest对象
var xhr=new XMLHttpRequest(); // 非ie
var xhr=new ActiveXObject(); // ie
兼容写法
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=ActiveXObject();
}
2，对象初始化(配置) 连接到服务器
xhr.open(“GET”,“url”,true)
3，向服务器发送请求
xhr.send()
4，等服务器响应变化
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200) // 完成并不一定成功,需要status来检测是成功还是失败
5，读取服务器返回的文本内容
responseText:从服务器返回来的文本
var data=xhr.responseText;
4、把数据渲染到页面上
}
六，ajax原生实现
// 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;
}
服务器返回响应码介绍
readyState为响应码，响应码共5个：
0:未初始化
1:向服务器发送请求
2:服务器已经接收请求
3:服务器正在处理数据
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数据：json是一种轻量级的数据交换格式
1. javscript中的数组与对象表示方法
2. json数据文件方法及应用
3. 字符串与json类型相互转换
注：json文件不能写注释，字串必须用双引号，键和值都是双引号
JSON.parse() 将json字符串转换为json对象
JSON.stringify() 将json对象转换为json字符串
八， jQuery中的ajax
$.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")
标签：异步,XMLHttpRequest,请求,json,xhr,ajax,服务器,页面 来源： https://blog.csdn.net/weixin_53687069/article/details/112915566
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。