前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ajax请求的五个步骤java_js ajax请求的五个步骤实现详解

ajax请求的五个步骤java_js ajax请求的五个步骤实现详解

作者头像
全栈程序员站长
发布2022-08-30 09:01:02
2.3K0
发布2022-08-30 09:01:02
举报
文章被收录于专栏:全栈程序员必看

大家好,又见面了,我是你们的朋友全栈君。

Ajax是Java前端最重要的技术之一,是支撑着前端交互数据的基石,今天我们就来了解下ajax发送请求所需的五个步骤。

首先我们需要来了解一下ajax,ajax的全称是AsynchronousJavascript+XML。

异步传输+js+xml。

所谓异步,在这里简单地解释就是:向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等到有了结果我们可以再来处理这个事。

这个很重要,如果不是这样的话,我们点完按钮,页面就会死在那里,其他的数据请求不会往下走了。这样比等待刷新似乎更加讨厌。

xml只是一种数据格式,在这件事里并不重要,我们在更新一行字的时候理论上说不需要这个格式,但如果我们更新很多内容,那么格式化的数据可以使我们有条理地去实现更新。

原生js发送ajax请求的是“XMLHttpRequest”,它的请求就是ajax的五个步骤。

Ajax五个步骤如下:

1.建立XMLHttpRequest对象;

2.设置回调函数;

3.使用open方法与服务器建立链接;

4.向服务器发送数据;

5.在回调函数中针对不同的响应状态进行处理;

下面用几个例子来实现一下吧:

1.建立xmlHttpRequest对象if (window.XMLHttpRequest)

{

xmlHttp = new XMLHttpRequest();

if (xmlHttp.overrideMimeType)

{

xmlHttp.overrideMimeType(“text/xml”);

}

}

else if (window.ActiveXobject)

{

var activeName = [“MSXML2.XMLHTTP”, “Microsoft.XMLHTTP”];

for (var i = 0; i

{

try

{

xmlHttp = new ActiveXobject(activeName[i]);

break;

}

catch (e)

{}

}

}

if (!xmlHttp)

{

alert(“创建xmlhttprequest对象失败”);

}

else

{}

2.设置回调函数xmlHttp.onreadystatechange = callback;

function callback()

{}

3.使用OPEN方法与服务器建立连接 xmlHttp.open(“get”,”ajax?name=”+ name,true)此步注意设置http的请求方式(post / get), 如果是POST方式,注意设置请求头信息xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)

4.向服务器端发送数据xmlHttp.send(null);

如果是post就不为空

5.在回调函数中针对不同的响应状态进行处理if (xmlHttp.readyState == 4)

{ //判断交互是否成功

if (xmlHttp.status == 200)

{ //获取服务器返回的数据 //获取纯文本数据

var responseText = xmlHttp.responseText;

document.getElementById(“info”)

.innerHTML = responseText;

}

}

以上就是本篇文章的所有内容了,更多ajax相关内容,请一直关注本站了解吧。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/145295.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年5月1,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档