使用ajax发送异步请求

原生js实现以及jquery ajax实现发送请求

文章目录

使用ajax发送异步请求
简介
实现方式
- 1.原生js实现
- - 1.get请求
  - 2.post请求
- 2.jquery ajax实现
- - 1.基本方式
  - 2.回调事件
- 3. jquery中的封装函数
- - 1.$.post
  - 2.$.get
  - 3.$.getJSON
  - 4.$.getScript
总结

简介

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面情况下，能够更新部分网页的技术。

同步和异步

同步互交：指向服务器发送一个请求,需要等待返回,然后才能够发送下一个请求，期间有个等待过程；
异步互交：指向服务器发送一个请求,不需要等待返回,随时可以再发送下一个请求，即不需要等待；

实现方式

1.原生js实现

1.get请求

代码如下（示例）：

// 创建请求对象
var xhr = new XMLHttpRequest()// 封装参数对象
var data = {id: 1,name: "张三"}// 配置请求方法，设置请求接口地址
//同步或异步请求：true（异步）或 false（同步）
xhr.open('get', 'http://localhost:8080/api?' + JSON.stringify(data),true)//发送请求
xhr.send()// 获取网络请求响应的数据
xhr.onreadystatechange = function () {// 响应完毕，并且请求成功if (xhr.readyState === 4 && request.status === 200) {var res = JSON.parse(xhr.responseText)//.....}}

2.post请求

代码如下（示例）：

// 1.创建一个实例对象var xhr = new XMLHttpRequest()// 需要传递的数据var data = {id: 1,name: '张三'}// 2.打开一个连接//同步或异步请求：true（异步）或 false（同步）xhr.open('post', 'http://localhost:8080/api',true);// 设置请求头 告诉后端我们要发送的是什么格式的数据xhr.setRequestHeader('Content-Type', 'application/json')// 3.发送请求// 发送json数据xhr.send(JSON.stringify(obj))// 4.接收响应xhr.onreadystatechange = function () {// 请求发送完成 请求成功if (xhr.readyState === 4 && xhr.status === 200) {var res = JSON.parse(xhr.responseText)console.log(res);//。。。。。}}
}

2.jquery ajax实现

jquery地址

1.基本方式

代码如下（示例）：

$.ajax({//缓存cache: false,//是否异步请求async: async == undefined ? true : async,//请求地址url: 'http://localhost:8080',//请求类型type: method == undefined ? "POST" : method,contentType: contentType == undefined ? 'application/json; charset=UTF-8': contentType ,// 设置的是请求参数data: {id: 1,name: '张三'},//设置响应体的类型dataType: 'json', //回调函数success: function (res) {// 设置了 dataType 选项客户端会主观认为服务端返回的就是 JSON 格式的字符串console.log(res);}});

2.回调事件

代码如下（示例）：

$.ajax({//缓存cache: false,//是否异步请求async: async == undefined ? true : async,//请求地址url: 'http://localhost:8080',//请求类型type: method == undefined ? "POST" : method,contentType: contentType == undefined ? 'application/json; charset=UTF-8': contentType ,// 设置的是请求参数data: {id: 1,name: '张三'},//设置响应体的类型dataType: 'json', // 在所有发送请求的操作（open, send）之前执行beforeSend: function (request) {       request.setRequestHeader("Authorization", CoreUtil.getData("token"));},// 请求成功（状态码为200）执行这个函数success: function (res) {console.log(res);},// 请求不正常（状态码不为200）执行error: function (res) {console.log('error', res);},// 不管是成功还是失败都是完成，都会执行这个 complete 函数(一般成功与失败都需要执行的操作写在这里)complete: function (res) {console.log('complete', res);}

3. jquery中的封装函数

1.$.post

语法：$.post(url,data,function(data,status,xhr),dataType);

代码如下（示例）：

　$.post("http://localhost:8080/api",data,function(res){if(res.success){alert("成功");}else{alert("失败");}},"json");

2.$.get

语法：$.get(url,data,function(data,status,xhr),dataType)

代码如下（示例）：

 $.get("http://localhost:8080/api",data,function(res,status){if(res.success){alert("成功");}else{alert("失败");}},"json");

3.$.getJSON

描述：发送get请求，并将数据转为json数据
语法：$.getJSON(url,data,function(data,status,xhr))

代码如下（示例）：

$.getJSON('http://localhost:8080/api', data, function (res) {alert(res)});

4.$.getScript

描述：执行一个js文件的代码
语法：$.getScript(url, [callback])

代码如下（示例）：

//url:待载入 JS 文件地址。
//callback:成功载入后回调函数。
$.getScript("ajax.js", function (data, Status, xhr) { alert("加载成功");});

总结

以上就是今天要讲的内容，本文介绍了ajax的使用方式以及jquery的一些封装函数，希望对大家有帮助。公众号 “俊俊同学的笔记”

Ajax异步请求方法(详细)相关推荐

jQuery使用ajax异步请求400解决方法
jQuery使用ajax异步请求访问状态码400解决方法: 先直接上结论:首先检查下自己使用的请求方式,我原来用的是post方式,更改为ajax之后就解决了,才反应过来应该是版本不兼容的问题! < ...
AJAX 异步请求详细教程
文章目录 AJAX 异步请求简介 Jquery 版 Ajax $.ajax() -- Jquery提供的 ajax 函数注册验证用户名是否可用 $.get() 与 $.post() Ajax 返回 ...
php原生的异步请求,原生JavaScript实现Ajax异步请求
ajax现在是一种非常流行的技术,现在虽然可以利用JQuery或者一些第三方插件甚至微软提供的一些控件可以方面的实现ajax功能,但是明白其原理也是非常重要的,下面是来使用纯javascript实现获 ...
从浅到深，带你彻底搞懂AJAX异步请求
在平时开发过程中,异步请求似乎比同步请求出现的频率还要高一些.这是为什么呢?在同步请求时如果对网页的部分内容进行更新时,是不是就必须重载整个页面.这样肯定是不行的,这时就可以采用异步请求来解决此问题. ...
如何判断一个请求是否是Ajax异步请求
前言今天在看项目过程中,发现了一段代码.是用来判断一个请求是否是ajax请求,出于好奇,我研究了一番. 代码预览 /*** 是否是Ajax异步请求* * @param request*/public ...
html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
php中jquery ajax请求参数,浅谈Jquery中Ajax异步请求中的async参数的作用
之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html asy.js function testAsync{ var temp; $.ajax( ...
python django异步访问_初试Ajax异步请求（基于Django框架）
概要: Ajax异步请求数据之前就听朋友提起过,但是之前一直没有什么机会使用这个技术,就没有去了解,后面在做网站评论这一功能时,为了使用户评论之后不用刷新网页就能够看到刚刚评论的数据,所以决定使用Aj ...
jquery的ajax异步请求接收返回json数据
jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以.这篇文 ...

Ajax异步请求方法(详细)

使用ajax发送异步请求

文章目录

简介

实现方式

1.原生js实现

1.get请求

2.post请求

2.jquery ajax实现

1.基本方式

2.回调事件

3. jquery中的封装函数

1.$.post

2.$.get

3.$.getJSON

4.$.getScript

总结

Ajax异步请求方法(详细)相关推荐

最新文章

热门文章