ajax学习总结

ajax 总结

<html>
	 <img src="../img/yl.jpg">
</html>

全局刷新与局部刷新

全局刷新

由浏览器向服务端发送请求，服务端处理请求并返回响应数据，全局刷新就是会将原来浏览器内存中的页面完全覆盖掉。

例如：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 异步实现的步骤

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
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();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

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'）， ....
    }});
});

posted @ 2022-06-15 18:57 kobedu 阅读(41) 评论(1) 编辑收藏举报

刷新页面返回顶部

kobedu