ajax的基本概念与实现方式

缺乏、安全感 2021-11-23 02:04 285阅读 0赞

ajax的基本概念与实现方式

开发工具与关键技术：MyEclipse 10/Java
    作者：cxxcon
    撰写时间：2019年07月25日

关于Ajax：ajax它不是一门语言，而是一种请求方法  
1、 基本概念：  
Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）  
同步与异步：客户端和服务端相互通信的基础上  
同步：就是客户端向服务端发送请求时，而这个请求的过程中客户端不可以做其它操作，必须要等待服务端的响应。  
异步: 就是客户端向服务端发送请求时，而这个请求的过程中客户端可以做其它操作，不需要等待服务端的响应。  
什么是AJAX呢？  
AJAX = 异步 JavaScript 和 XML。  
AJAX 是一种用于创建快速动态网页的技术。  
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。  
2、 实现方式（原生的js实现方式、jqeury实现方式）

1．原生的js实现方式（了解）  
//发送异步请求  
//1、创建发送核心对象  
var xmlhttp;  
if (window.XMLHttpRequest)  
\{  
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码  
xmlhttp=new XMLHttpRequest();  
console.log(11);  
\}  
else  
\{  
// IE6, IE5 浏览器执行代码  
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);  
console.log(1122);  
\}  
//2.建立连接  
/\* 参数：  
1.请求方式：GET 或 POST  
\*get请求：请求参数可以直接拼接在URL后面，send方法为空参

*post请求：请求参数要定在send方法中
    2.请求的URL:
    3.同步或者异步请求：true（异步）或同步（false） */
    xmlhttp.open("GET","ajaxServlet?oper=6666",true);
    //3.发送请求
    xmlhttp.send();
    //4.接收并处理来自服务器的响应结果
    //获取方式： responseText  获得字符串形式的响应数据。  responseXML 获得 XML 形式的响应数据。
    //什么时候获取呢？当服务器响应成功后再获取
    //当xmlhttp对象的就绪状态改变时，触发事件 onreadystatechange(存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。)
    xmlhttp.onreadystatechange=function()

\{  
//判断readyState的就绪状态是否为4，判断status响应状态码是否为200  
/\* readyState的就绪状态：  
0: 请求未初始化  
1: 服务器连接已建立  
2: 请求已接收  
3: 请求处理中  
4: 请求已完成，且响应已就绪  
*/  
/* status的响应状态码  
200: “OK”  
404: 未找到页面  
\*/  
if (xmlhttp.readyState4 && xmlhttp.status200)  
\{  
alert(xmlhttp.responseText);  
\}  
2.jqeury实现方式  
1、 . a j a x ( ) / / 使 用 .ajax() //使用 .ajax()//使用.ajax()发送请求  
 . a j a x ( u r l : " a j a x S e r v l e t " , / / 路 径 t y p e : " p o s t " , / / 请 求 方 式 （ 如 果 不 写 ， 默 认 为 g e t 请 求 ） d a t a : " o p e r " : " 牛 逼 " , / / 请 求 参 数 、 s u c c e s s : f u n c t i o n ( d a t a ) a l e r t ( d a t a ) ; , / / 响 应 成 功 后 的 回 调 函 数 e r r o r : f u n c t i o n ( ) / / 失 败 a l e r t ( " 噢 噢 " ) ; , d a t a T y p e : " t e x t " / / 设 置 接 收 响 应 数 据 的 格 式 ) ; 2 、 .ajax(\{ url:"ajaxServlet",//路径 type:"post",//请求方式 （如果不写，默认为get请求） data:\{"oper":"牛逼"\},//请求参数、 success:function(data)\{ alert(data); \},//响应成功后的回调函数 error:function()\{//失败 alert("噢噢"); \},dataType:"text"//设置接收响应数据的格式 \}); 2、 .ajax(url:"ajaxServlet",//路径type:"post",//请求方式（如果不写，默认为get请求）data:"oper":"牛逼",//请求参数、success:function(data)alert(data);,//响应成功后的回调函数error:function()//失败alert("噢噢");,dataType:"text"//设置接收响应数据的格式);2、.get()  
语法： $.get(URL,callback);  
 . g e t ( " a j a x S e r v l e t " , o p e r : " 313 " , f u n c t i o n ( ) ) ; 3 、 .get("ajaxServlet",\{oper:"313"\},function()\{\}); 3、 .get("ajaxServlet",oper:"313",function());3、.post()  
语法：$.post(URL,data,callback);  
$.post(“ajaxServlet”,\{oper:“313”\},function()\{\});