jquery框架的ajax,原生ajax和jquery框架ajax的使用

我不是女神ヾ 2022-09-03 11:17 229阅读 0赞

创建一个异步调用对象，XMLHttpRequest

创建一个新的 HTTP 请求，并且指定方法，url 及参数等(XMLHttpRequest.open(‘GET/POST’,url,true))

设置用于响应 HTTP 状态变化的函数(XMLHttpRequest.onreadystatuschange=function)

发送 HTTP 请求(XMLHttpRequest.send())

获取异步调用数据

GET:

//步骤一:创建异步对象

var ajax = new XMLHttpRequest();

//步骤二:设置请求的 url 参数,参数一是请求的类型,参数二是请求的 url,可以带参数,动态的传递参数 starName 到服务端

ajax.open(‘get’,’getStar.php?starName=’+name);

//步骤三:发送请求

ajax.send();

//步骤四:注册事件 onreadystatechange 状态改变就会调用

ajax.onreadystatechange = function () \{

if (ajax.readyState==4 &&ajax.status==200) \{

//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的

console.log(ajax.responseText);//输入相应的内容

\}

\}

post 请求:

//创建异步对象

var xhr = new XMLHttpRequest();

//设置请求的类型及 url

//post 请求一定要添加请求头才行不然会报错

xhr.setRequestHeader(“Content-type”,” application/x-www-form-urlencoded”);

xhr.open(‘post’, ‘02.post.php’ );

//发送请求

xhr.send(‘name=fox&age=18’);

xhr.onreadystatechange = function () \{

// 这步为判断服务器是否正确响应

if (xhr.readyState == 4 && xhr.status == 200) \{

console.log(xhr.responseText);

\}

\};

Jquery

ajax(\{

url: myUrl,

type: ‘get’,

dataType: ‘json’,

timeout: 1000,

success: function (data, status) \{

console.log(data)

\},

fail: function (err, status) \{

console.log(err)

\}

\})

不使用 contentType: “application/json” 则 data 可以是对象

$.ajax(\{

url: actionurl,

type: “POST”,

datType: “JSON”,

data: \{ id: nodeId \},

async: false,

success: function () \{\}

\});

使用 contentType: “application/json” 则 data 只能是 json 字符串

$.ajax(\{

url: actionurl,

type: “POST”,

datType: “JSON”,

contentType: “application/json”

data: “\{‘id’: “ + nodeId +”\}”,

async: false,

success: function () \{\}

\});

JSON.parse()

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 json 对象。

JSON.stringify()

JSON 通常用于与服务端交换数据。

在向服务器发送数据时一般是字符串。

我们可以使用 JSON.stringify() 方法将 json 对象转换为字符串。

发表评论取消回复

表情：

评论列表（有 0 条评论，229人围观）

还没有评论，来说两句吧...

相关阅读

相关【Ajax】jQuery中Ajax的使用

【Ajax】jQuery Ajax的使用简介：jQuery提供多个与Ajax有关的方法。通过jQuery Ajax方法，能够使用HTTP Get和 HTTP Post从

╰+攻爆jí腚メ/ 2023年10月08日 15:17/ 0 赞/ 63 阅读

相关原生ajax和jQuery中的ajax

Ajax全称是asynchronous javascript and xml,主要用来实现客户端与服务器端的异步通讯效果，实现页面的局部刷新，从而创建快速动态网页的技术什

傷城~/ 2023年07月13日 08:27/ 0 赞/ 69 阅读

相关 jquery ajax ajax()

-------------------- jquery ajax ajax() 应用：ajax()是jquery ajax底层实现，其他的ajax提交方式都可以通

浅浅的花香味﹌/ 2023年03月04日 08:21/ 0 赞/ 56 阅读

相关 Ajax & Jquery的使用

Ajax & Jquery Ajax Ajax是什么? Asynchronous Javascript And XML（异步JavaScript和XML）并不

蔚落/ 2022年11月30日 12:50/ 0 赞/ 193 阅读

相关原生ajax和jquery中的ajax的使用和理解

原生ajax和jquery中的ajax的使用和理解 ![在这里插入图片描述][20210224114028770.png] Ajax 即“Asynchronous Ja

灰太狼/ 2022年11月01日 04:25/ 0 赞/ 46 阅读

相关 jquery框架的ajax,原生ajax和jquery框架ajax的使用

创建一个异步调用对象，XMLHttpRequest 创建一个新的 HTTP 请求，并且指定方法，url 及参数等(XMLHttpRequest.open(‘GET/POST’

我不是女神ヾ/ 2022年09月03日 11:17/ 0 赞/ 230 阅读

相关 js原生ajax与jquery的ajax用法对比

js原生ajax与jquery的ajax用法对比一、Ajax概述 AJAX（AsynchronousJavascript And XML）翻译成中文就是“

ゝ一纸荒年。/ 2022年05月28日 12:58/ 0 赞/ 273 阅读

相关 Jquery Ajax的使用

Ajax概述 Ajax就是通过 HTTP 请求加载远程数据。通常用于定制一些http请求来灵活的完成前端与后端的数据交互需求。注意，所有的选项都可以通过$.ajaxS

灰太狼/ 2022年05月26日 02:29/ 0 赞/ 254 阅读

相关 WEB22_Js原生Ajax和Jquery的Ajax

一、Ajax概述 1．什么是同步，什么是异步同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态异步现象：客户端

柔光的暖阳◎/ 2022年03月01日 08:16/ 0 赞/ 274 阅读

相关原生ajax请求与jquery-ajax请求

ajax请求可以在不刷新页面的情况下，请求后台服务器为了演示的效果，在jsp中添加一段视频，再播放视频的时候请求后台，看效果。普通表单提交返回数据，会刷新页面使

约定不等于承诺〃/ 2022年02月04日 08:29/ 0 赞/ 465 阅读