ajax异步请求

2024-04-12 21:59:56

一、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渲染数据的优缺点

优点：

  1. 无刷新更新数据,

ajax最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，
并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。

  1. 异步与服务器通信

ajax使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
优化了Browser（浏览器）和Server（服务端）之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。

  1. 前端和后端负载平衡

ajax可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，
减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，
可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。

  1. 基于标准被广泛支持

ajax基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。
随着ajax的成熟，一些简化ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，
为那些不支持JavaScript的用户提供替代功能。

  1. 界面与应用分离

ajax使Web中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

缺点：

  1. .ajax干掉了Back和History功能，即对浏览器机制的破坏。

  2. 对搜索引擎支持较弱

ajax请求不利于搜索引擎优化，一般搜不到ajax添加到页面的信息！

  1. 破坏程序的异常处理机制。

  2. 违背URL和资源定位的初衷。

例如，我给你一个URL地址，如果采用了ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。

四、ajax与传统web渲染区别

  1. 客户端处理方式不同：传统web需要重新加载整个页面，才可以实现数据更新.
  2. 提交方式不同，传统web向服务交互时，通过浏览提交整个页面，ajax通过javascript中的XMLHttpRequest对象提交.
  3. 服务器响应不同:传统的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")
上一篇：Ajax


下一篇：什么是AJAX