ajax 总结
全局刷新与局部刷新
全局刷新
由浏览器向服务端发送请求，服务端处理请求并返回响应数据，全局刷新就是会将原来浏览器内存中的页面完全覆盖掉。
例如：index.html页面向后台发送一个请求，此时浏览器内存中是index.html的数据，服务器接收到前端页面发送的请求并处理请求返回响应给前台，返回后的数据会将原来页面的内容全部覆盖掉，整个浏览器的数据全部被刷新。从新在窗口显示数据，样式，标签等。
全局刷新原理:
- 必须由浏览器亲自向服务端发送请求协议包。
- 这个行为导致服务端直接将【响应包】发送到浏览器内存中
- 这个行为导致浏览器内存中原有内容被覆盖掉
- 这个行为导致浏览器在展示数据时候，只有响应数据可以展示
局部刷新（重点）
浏览器在展示数据的时，此时在窗口可以看到本次响应数据，同时又可以看到浏览器内存中原有的数据
局部刷新的原理：
- 不是由浏览器发送请求给服务端。
- 浏览器委托浏览器内存中的一个脚本代替浏览器发送请求。
- 这个行为导致服务端直接将响应包发送脚本对象的内存中
- 会导致脚本对象的内容被覆盖掉，但是此时浏览器内存中的绝大部分内容并未受影响。
- 所以可以在浏览器上同时展示原有数据和响应数据。
Ajax是实现局部刷新的一种技术。
异步请求对象
在局部刷新，需要创建一个对象，代替浏览器发起请求的行为，这个对象存在内存中。代替浏览器发起请求并接收响应数据。这个对象叫做异步请求对象。
全局刷新是同步行为，局部刷新是异步行为。
这个异步对象用于在后台与服务器交换数据。XMLHttpRequest 就是我们说的异步对象。
XMLHttpRequest 对象能够：
- 在不重新加载页面的情况下更新网页
- 在页面已加载后向服务器请求数据
- 在页面已加载后从服务器接收数据
var xmlhttp=new XMLHttpRequest();
//创建异步对象。ajax中的核心对象就是XMLHttpRequest
Ajax
什么是Ajax
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和XML）
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分页面内容的新方法
Ajax不仅需要前端的技术，同时需要后端（服务器）的配合。服务器需要提供数据，数据是Ajax请求相应的结果。
Ajax 异步实现的步骤
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
使用 AJAX 修改该文本内容
修改内容
1，创建对象的方式
xmlhttp=new XMLHttpRequest();
XMLHttpRequest 对象用于和服务器交换数据。
2，onreadstatechange 事件
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
xmlhttp.readyState的值及解释：
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
status:
- 200: “OK”
- 404: 未找到页面
xmlhttp.readyState== 4 && xmlhttp.status ==200的解释：请求完成并且成功返回
3，初始化请求参数
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
规定请求的类型、URL 以及是否异步处理请求。
- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置
- async：true（异步）或 false（同步）
send(string);
//string 仅用于post请求
请求类型的深究
请求类型：
- get
- post
get
与post请求相比get请求更加简单，更快，更安全，我们大部分时间都是在使用get请求，然而存在即合理为什么需要post请求，因为有些需求是get处理不了的，比如：向服务上传数据…
以下的情况使用post更加合理：
- 不愿使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
get请求是会使用缓存的，有个小技巧如果你想要得到服务器最新的内容而不是缓存中的内容：
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
如果您希望通过 GET 方法发送信息，请向 URL 添加信息：
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
post
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");
4，发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
5，接收服务器响应的数据
xmlhttp.responseText;
xmlhttp.responseXMl;
服务器的响应：
如需获得来自服务器的响应，请使用XMLHttpRequest对象的responseText或responseXMl属性。
处理JSON数据时 JSON.parse()方法将数据转化为javascript对象。
也可以发送 JSON 数据向服务器：
xmlhttp.send(JSON.stringify({ "email": "admin@runoob.com", "response": { "name": "runoob" } }));
注意点
对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。
通过 AJAX，JavaScript 无需等待服务器的响应，而是：
- 在等待服务器响应时 执行其他脚本
- 当响应 就绪后对响应进行处理
当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status==200){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); xmlhttp.send();
我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
注意：当您使用 async=false 时，请不要编写 onreadystatechange 函数 – 把代码放到 send() 语句后面即可：
xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
开发中很少使用原生的 js 进行开发，JQuery现在虽然并不热门却也普遍，所以我们需要知道在JQuery中Ajax的使用。
$("button").click(function(){
$.ajax({
url:"demo_test.txt",
data:{
name:"",
value:""
},
type:"post",
dataType:"json",
success:function(result){
//对服务器响应的数据进行处理，通常是JSON字符串，这次明确指定了返回为JSON字符串（dataType:'json'）， ....
}});
});
Original: https://www.cnblogs.com/kobedu/p/16379523.html
Author: kobedu
Title: ajax学习总结
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/587247/
转载文章受原作者版权保护。转载请注明原作者出处！