ajax的概念和原生js中的ajax、jquery中的ajax

最新推荐文章于 2022-12-19 19:59:49 发布

小杨同学呀呀呀呀

最新推荐文章于 2022-12-19 19:59:49 发布

阅读量144

点赞数 1

分类专栏： ajax 前端文章标签： ajax jquery中的ajax 原生jsajax ajax中get和post请求的区别 ajax的属性及方法

本文链接：https://blog.csdn.net/weixin_45522071/article/details/103265036

版权

前端同时被 2 个专栏收录

34 篇文章 4 订阅

订阅专栏

ajax

2 篇文章 0 订阅

订阅专栏

ajax

1、ajax的概念

  Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

2、原生JS中的ajax

1.使用ajax发送数据的步骤
第一步：创建异步对象

var xhr = new XMLHttpRequest();

第二步：设置请求行 open(请求方式，请求url):

// get请求如果有参数就需要在url后面拼接参数，
// post如果有参数，就在请求体中传递 xhr.open("get","validate.php?username="+name)
xhr.open("post","validate.php");

第三步：设置请求（GET方式忽略此步骤）头:setRequestHeader()

// 1.get不需要设置
// 2.post需要设置请求头：Content-Type:application/x-www-form-urlencoded
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

第四步：设置请求体 send()

// 1.get的参数在url拼接了，所以不需要在这个函数中设置
// 2.post的参数在这个函数中设置(如果有参数)
xhr.send(null) xhr.send("username="+name);

第五步：让异步对象接收服务器的响应数据

xhr.onreadystatechange = function(){ 
if(xhr.status == 200 && xhr.readyState == 4){ 
 console.log(xhr.responseText);
 }

整体如下：

var xhr=new XMLHttpRequest();
//参数1是请求方式 参数2是请求地址get可以拼接参数 参数3是true/false 一般省略 默认是true是异步
xhr.open("请求方式","请求地址");
xhr.send();//发送请求
xhr.onreadystatechange=function () {
     if(xhr.readyState==4&&xhr.status==200){
		console.log(xhr.responseText);//返回后台的响应结果
             
     }
}

2、jquery中的Ajax

$.ajax({
 type:"get", // get或者post
 url:"",   // 请求的url地址
 data:{},  //请求的参数
 dataType:"json",//json写了jq会帮我们转换成数组或者对象 他已经用JSON.parse弄好了 
 success:function(data){ //成功拿到结果放到这个函数 data就是拿到的结果
 }
})

3、ajax对象的属性、方法

属性

readyState： Ajax状态码
0：表示对象已建立，但未初始化，只是 new 成功获取了对象，但是未调用open方法
1：表示对象已初始化，但未发送，调用了open方法，但是未调用send方法
2：已调用send方法进行请求发送
3：正在接收数据（接收到一部分），客户端已经接收到了一部分返回的数据
接收完成，客户端已经接收到了所有数据