初学NodeJS(一)
Ajax 介绍
在node.js中前后台交互数据经常会用到这个东西,Ajax不是新的编程语言,而是一种使用现有标准的新方法,他可以实现不刷新网页部分更新数据。
Ajax数据格式
使用封装Ajax需要了解什么是XMLHttpRequest;
什么是XMLHttpRequest
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新
创建XMLHttpRequest对象实例:var XMLHttpRequest=new XMLHttpRequest();
Ajax的传输方式
传输数据方式有两种,一种get,一种post。
get: 地址栏 - 数据都可视, 不安全, 方便 可传输数据大小32kb
post: 加密 - 数据不可视,安全, 不方便 可传输数据大小2gb
向后端发送数据
利用XMLHttpRequest对象的open方法
open方法用于解析数据传输方式,数据内容,是否异步调用
get方法
var XMLHttpRequest = new XMLHttpRequest(); XMLHttpRequest.open('GET','数据',true); XMLHttpRequest.send();
var XMLHttpRequest = new XMLHttpRequest(); XMLHttpRequest.open('POST','数据',true); XMLHttpReuqest.send();
异步 - True 或 False
同步:后台进程一步一步完成
异步:后台进程同时调用运行
XMLHttpRequest的open方法第三个参数‘true’ or ‘false’就是选择是否异步,当然选择true啦,高效。
XMLHttpRequest.onreadystatechange=function() { if(XMLHttpRequest.readyState == 4) { if(XMLHttpRequest.status >= 200 && XMLHttpRequest.status < 300 || XMLHttpReuqest.status == 304) { //console.log(XMLHttpRequest.responseText); json.success(XMLHttpReuqest.responseText); }else{ //console.log('服务器错误'); } } }
onreadystatechange方法:当状态码改变时触发,
readyState 当前状态码
什么是状态码
ajax状态码 - ajax readyState: 0 - (未初始化)还没有调用send()方法 1 - (载入)已调用send()方法,正在发送请求 2 - (载入完成)send()方法执行完成,已经接收到全部响应内容 3 - (交互)正在解析响应内容 4 - (完成)响应内容解析完成,可以在客户端调用了
- XMLHttpRequest.state
当前进程加载状态,例如404是无回应的,200是加载成功等
服务器响应
如果服务器有内容响应也就是后端有数据返回前端则有两个XMLHttpRequest对象获取responseText,responseXML。
responseText返回字符串形式的数据
responseXML返回XML形式的数据
responseText 例子
html: <div id="div1"></div> js: var XMLHttpRequest = new XMLHttpRequest(); document.getElementById("div1").innerHTML=XMLHttpRequest.responseText;
相关推荐
jiaguoquan00 2020-07-07
坚持着执着 2020-06-05
zhaolisha 2020-06-12
knightwatch 2020-04-25
zhaolisha 2020-01-11
zhaolisha 2019-12-29
wanghongsha 2019-12-06
小小大人物 2014-01-19
loopstang 2014-01-11
81493369 2019-11-04
Liuzhiqianblog 2019-11-03
用不完的好奇心 2019-10-26
89241846 2019-09-12
青菜萝卜白菜 2019-07-03
荒唌Blog 2017-12-18
无材可去补苍天 2019-06-12
HAcSeeking 2018-11-05
81530694 2013-03-14