首页 > 代码库 > 原生AJAX如何异步提交数据?
原生AJAX如何异步提交数据?
AJAX概述
AJAX:Asynchronous Javascript And XML,异步的JS和XML。2001,Google为了改进搜索的用户体验,提出了GoogleSugguest效果,正式提出了AJAX的概念。
目标:在无刷新无提交的情况下,实现页面内容的局部更新——数据来自于服务器。
常见应用:实时数据获取(如股票走势图)、搜索建议、聊天室、SPA
AJAX应用依赖于浏览器底层提供的核心对象:
XMLHttpRequest:用于向Web服务器发起异步请求,并接收响应消息。
使用XHR发起异步请求步骤:
(1)创建XHR对象 —— 每个XHR只能发一个请求
varxhr = new XMLHttpRequest();
(2)绑定监听函数,处理XHR的每一次状态改变
xhr.onreadystatechange = function(){ }
(3)打开到Web服务器的连接
xhr.open(‘GET‘,‘9.php‘, true);
(4)发送请求消息主体
xhr.send(null);
若第(3)步中是POST方法,则要设置请求头格式,即
xhr.open(‘POST‘, ‘x.php‘, true);
xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘); //修改请求消息头部
xhr.send(‘k1=v1&k2=v2&k3=v3‘);
以上是原生AJAX的基本步骤,练习内容为:仿google的搜索建议。链接地址为:搜索建议
原生AJAX如何异步提交数据?