JavaScript axios异步数据准备问题异步数据请求

转载

新新人类 2024-01-29 02:55:31

文章标签 服务器 xml 客户端 文章分类 JavaScript 前端开发

同步请求和异步请求的概念

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。

异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

同步请求:

客户端请求(等待)->服务端处理->响应->页面载入（缺少对象:XMLhttpRequest）
这时候如果有错误，只能再次发送请求，再次等待

异步请求：

客户端请求(不等待，发送下一个请求)->服务端处理->响应（已经处理的请求）->页面载入（XMLhttpRequest），不刷新整个页面，只是通过js操作Document改变其样式和值。

例如：当你填写邮箱地址的时候，页面当时就把邮箱地址发送到了服务器（也就是页面发送了一个请求），服务器做处理和响应，得到你的邮箱地址填写重复了，把响应结果发给页面，在这个过程中你仍然可以填写其他内容，这时候服务器会提示你有重复的邮箱地址，在页面上的表现只是邮箱地址旁别加了一行字或者把整个文本框标红，并没有重新刷你的页面，所有的填写错误会实时的显示出来，你也会实时的更正。这个过程中，你会有整个页面的刷新，也不会有整个页面的提交和等待，最后提交，一切都会搞定的。

Http请求的概念理解
http是计算机通过网络进行通信的规则，作用:客户端向服务端发送请求信息和服务。是一种无状态的协议(不建立持久的连接,服务端不保留连接的信息)

客户端:自己的计算机的浏览器(web浏览器)

服务端:服务器,一台高性能的计算机,作为存储,处理网络上的数据,信息(web服务器)。

服务器指一个管理资源并为用户提供服务的计算机软件，通常分为文件服务器、数据库服务器和应用程序服务器。运行以上软件的计算机或计算机系统也被称为服务器。

一个完整的HTTP请求过程的七个步骤:

建立TCP连接（三次握手机制）
web浏览器向web服务器发送请求命令
web浏览器发送请求头信息
web服务器应答
web服务器发送应答头信息
web服务器向浏览器发送数据
web服务器关闭TCP连接

HTTP请求的三部分组成:

1.HTTP请求的方法或动作,比如GET还是POST（请求行）
2.正在请求的URL,总得知道请求的地址是什么（请求行）
3.请求头,包含一些客户端环境信息,身份验证信息等（请求头）
4.请求体,也就是请求正文,请求正文中可以包含客户提交的查询字符串信息,表单信息等等;（请求体）

格式：
请求行：请求的方式（post、get…）路径（URL）协议版本（HTTP/1.1）

请求头：保存本地浏览器的信息，是发送的服务器，被服务器解析的
Accept：当前浏览器可以解析的类型，如text.html，application、xhtml-xml，*/*
User-Agent：当前浏览器及本地客户端的一些硬件信息
host：主机地址
connection：连接，HTTP1.1版本时Keep-Alive

请求体：请求体是存储请求数据的，只有post请求时请求体中才有内容

HTTP响应的三部分组成:

格式：
响应行：响应协议（HTTP/1.1）状态码（200）状态码描述（ok）
响应头：保存了服务器的信息及响应的内容信息，被浏览器解析
响应体：存储响应的数据，给客户看，一般是指HTML页面

HTTP状态码

100:信息类,表示web浏览器请求,正在进一步的处理中
200:成功,表示用户请求被正确接收正在进一步的处理中 200 OK
300:表示请求没有成功,客户端必须采取进一步的动作
400:客户端错误,表示客户端提交的请求有错误例如:404 NOT Found,意味着
请求中所引用的文档不存在
500:服务器错误表示服务器不能完成对请求的处理,如500

Ajax基础总结

参考：
一、什么是Ajax
AJAX即“Asynchronous Javascript And XML”（异步 JavaScript和XML），
AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
它是一套综合了多项技术的浏览器端网页开发技术。
这些技术包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.

二、Ajax原理

运用HTML和css来实现页面,表达信息

通过浏览器的XmlHttpRequest(Ajax引擎)对象

来向服务器(发送异步请求)并(接收服务器)的响应数据，

然后用javascript来操作DOM，实现动态局部刷新。

具体详解请参考W3Cschool上面的内容)http://www.w3school.com.cn/ajax/index.asp（官网）三、Ajax实现过程（通常是）

第一步:Javascript监听浏览器网页事件(点击,提交,更改等)

第二步:由javascript创建Ajax引擎对象

第三步:通过Ajax引擎对象发出请求

第四步:Ajax引擎等待并且接受服务器的响应内容

第五步:javascript再从 Ajax引擎对象中获取响应内容,
并且通过dom改变网页界面显示效果
1.创建Ajax引擎对象
就是XMLHtttpRequest对象,所有现代浏览器均支持XMLHttpRequest对象
(IE5 和 IE6 使用 ActiveXObject)它同时也是一个Javascript对象.

Ajax引擎(XMLHttpRequest)

//兼容处理

var xhr = null;
if (window.XMLHttpRequest) {
    //所有现代浏览器(IE7+.Firefox.Chrome.Safari以及opera)
    xhr = new XMLHttpRequest;
}else{
    //老版本的Internet Explorer使用ActiveX对象
    xhr = new ActiveXObject("Microsoft.XMLHttp");
}

2.配置请求对象的信息
xhr.open(‘GET/POST’,‘url地址’,[‘是否异步’]);

注意：如果使用post请求,就一定要设置请求头
xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded; charset=gb2312”);
3.发送请求
xhr.send([post请求参数字符串]);
发送请求分为两种情况:
1.监控用户的事件(onclick,onchange等),通过ajax发送请求
2.监控浏览器的事件(onload),通过ajax发送请求.

4.监听Ajax引擎对象的改变(是否正确做出了响应)

xmlHttpRequest.onreadystatechange = function(){
    if (xmlHttpRequest.readyState== 4 && xmlHttpRequest==200) {
            //xmlHttpRequest.responseText
            //xmlHttpRequest.responseText
    }
}

4.1 - 详解onreadystatechange
onreadystatechange属性是一个方法,
监控到响应内容的返回,
根据响应内容使用javascript改变当前页面的部分html代码,从而达到不刷新改变局部html代码.
当Ajax引擎的状态发生改变时都会执行onreadystatechange属性对应的方法

其他方法：
abort:取消当前请求
getAllResponseHeaders:获取响应的所有http头
getResponseHeader:从响应信息中获取指定的http头
open(方式get/post，url地址，同步异步):
创建一个新的http请求，打开请求，并指定此请求的方法、URL以及验证信息(用户名/密码)

send():发送请求到http服务器并接收回应

setRequestHeader:单独指定请求的某个http头，header()设置http头协议信息

其他属性：
onreadystatechange:指定当readyState属性改变时的事件处理句柄。

readyState:返回当前请求的状态，ajax行进过程中不同状态

responseBody:将回应信息正文以unsigned byte数组形式返回.

responseStream:以Ado Stream对象的形式返回响应信息。

responseText:将响应信息作为字符串返回.只读

responseXML:将响应信息格式化为Xml Document对象并返回，只读

status:返回当前请求的http状态码. 200 ok 304 缓存；
         404 not found; 403 没有权限 501 服务器级别错误
statusText:返回当前请求的响应行状态文本， ok not found forbidden

4.2 - 详解Ajax引擎的状态属性 readyState(0 1 2 3 4)
*0.请求未初始化
*1.服务器连接已建立
*2.请求已接收
*3.请求处理中
*4.请求已完成,并且响应已就绪
当Ajax引擎的状态属性为readyState为4时,说明服务器的响应已经发送给Ajax请求了.
但是响应的状态吗为200时:说明响应的内容是正确的,这时才会根据相应内容对当前页面的html处理

基本示例：

var xhr = new XMLHttpRequest;
xhr.open('GET/POST','url地址',['是否异步']);
xhr.send([post请求参数字符串]);
xhr.onreadystatechange = function(){
    if (xmlHttpRequest.readyState== 4 && xmlHttpRequest==200) {
            //做一些事情
            //xhr.responseText
    }
}

使用Ajax的优点:

使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。
这使得Web应用程序更为迅捷地响应用户动作，并避免了在网络上发送那些没有改变的html代码信息。

1.减轻服务器负担，按需要获得数据。
2.无刷新更新页面，减少用户的实际和心理的等待时间。
3.更好的用户体验。
4.减轻宽带的负担。
5.主流浏览器支持

缺点:

1.AJAX的程序必须测试针对各个浏览器的兼容性。
2.AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；需提醒用户
3.对搜索引擎支持不好。

实例：

需求：
在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回true或false，返回true表示这个用户名已经被注册过，返回false表示没有注册过。
客户端得到服务器返回的结果后，确定是否在用户名文本框后显示“用户名已被注册”的错误信息！

后端代码（不完善）

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException 
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        //接收到username参数
        String username = request.getParameter("username");
                //判断是否存在
        if("cheng".equals(username)) {
                        //如果存在，就返回true
            response.getWriter().print(true);
        } else {
                         //如果不存在，就返回false
            response.getWriter().print(false);
        }
    }

前台页面：

<script type="text/javascript">
//创建Ajax对象
function createXMLHttpRequest() {
    try {
        return new XMLHttpRequest();
    } catch (e) {
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
}
//定义Ajax请求发送函数
function send() {
	//调用对象
    var xmlHttp = createXMLHttpRequest();
    //接受响应数据
    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            if(xmlHttp.responseText == "true") {
                document.getElementById("error").innerHTML = "用户名已被注册！";
            } else {
                document.getElementById("error").innerHTML = "";
            }
        }
    };
    xmlHttp.open("POST", "/ajaxdemo1/BServlet", true);
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    var username = document.getElementById("username").value;
    //发送请求
    xmlHttp.send("username=" + username);
}
</script>
<h1>注册</h1>
<form action="" method="post">
用户名：<input id="username" type="text" name="username" "send()"/><span id="error"></span><br/>
密　码：<input type="text" name="password"/><br/>
<input type="submit" value="注册"/>
</form>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。