100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 原生JS异步提交与获取数据

原生JS异步提交与获取数据

时间:2018-10-12 19:52:31

相关推荐

原生JS异步提交与获取数据

开发工具与关键技术: MVC

AJAX异步 是通过在后台与服务器进行少量数据交换,使网页实现异步更新的一种技术,

不需要重新加载整个页面,而传统的网页更新内容需要重载整个页面。

原生JS实现异步获取如下:

创建XMLHttpRequest对象:用于在后台与服务器交换数据,是Ajax的基础

为兼容老版本IE(IE5,IE6),我们需要判断当前浏览器是否支持XMLHttpRequest对象 , 如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject;

open()方法共三个参数(“请求类型(get,post)”,“请求路径”,是否异步(默认值为true))

send()方法向服务器发送请求,需要提交数据时在send()前使用 setRequestHeader() 来添加 HTTP 头,再将数据写为JSON字符串形式(如图二des)规定在send()方法中,即可发送请求与提交数据,send()提交数据仅限于post类型请求。

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

onreadystatechange事件,当请求被发送到服务器时,我们判断请求是否完成,响应是否就绪,当 readyState 等于 4 且状态为 200 时,表示响应已就绪。

readyState: 0: 请求未初始化; 1: 服务器连接已建立; 2: 请求已接收; 3: 请求处理中; 4: 请求已完成,且响应已就绪。

status: 200 : OK; 404 : 未找到页面,url错误

响应就绪后,可使用responseText或reponseXML属性获得字符串形式或XML形式的响应数据,结合需要来使用数据。

responseText获取到字符串数据,可使用JSON.parse()方法将字符串形式数据转化为js对象,

可调用js对象内的属性实现数据回填等功能;当需要将对象信息提交时,可在send()方法前使用JSON.stringify()方法将js对象转化为字符串形式的数据,然后在send()方法中进行提交。

以上就是原生JS异步提交与获取数据的步骤以及一些常用的方法。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。