原生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如何异步提交数据?的更多相关文章
- jQuery选取所有复选框被选中的值并用Ajax异步提交数据
昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...
- JQuery中使用FormData异步提交数据和提交文件
web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一 ...
- ASP模拟POST请求异步提交数据的方法
这篇文章主要介绍了ASP模拟POST请求异步提交数据的方法,本文使用MSXML2.SERVERXMLHTTP.3.0实现POST请求,需要的朋友可以参考下 有时需要获取远程网站的某些信息,而服务器又限 ...
- Ajax.BeginForm的异步提交数据 简介
Html.BeginForm与Ajax.BeginForm都是MVC架构中的表单元素,它们从字面上可以看到区别,即Html.BeginForm是普通的表单提交,而Ajax.BeginForm是支持异步 ...
- 表单(同步提交)和AJAX(异步提交)示范
表单提交(同步提交) HTML文件: PHP文件: 这样就能接收到HTML里输入的内容,注意: FORM表头method为POST,PHP文件获取的方法就是$_POST,method为GET,PHP的 ...
- 通过ajax给后台提交数据时,radio性别数据的获取
通过ajax向后台异步发送数据,经常我们会遇到个人信息额提交,一般我们采用FormData来装数据.在装性别值得时候,我们会有两个radio框,获取radio值得方法如下: 一般情况下,一个radio ...
- JQuery 异步提交数据
类别添加 名称:   正在发送数据请求… <% dim strValue blnLogin = false; strValue = request.Form("t ...
- MVC—实现ajax+mvc异步获取数据
之前写过ajax和一般处理程序的结合实现前后台的数据交换的博客,如今做系统用到了MVC,同一时候也用到了异步获取数据. ajax+一般处理程序与MVC+ajax原理是一样的在"URL&quo ...
- 使用bean接收ajax表单提交数据包含文件上传
这几天写带图片上传的表单提交,一个配置小程序活动弹出框样式的功能,记录一下一些需要注意的地方 首先是 前端 JSP 文件的表单 <form class="search-wrapper& ...
随机推荐
- 跟我一起学extjs5(17--Grid金额字段单位MVVM方式的选择)
跟我一起学extjs5(17--Grid金额字段单位MVVM方式的选择) 这一节来完毕Grid中的金额字段的金额单位的转换.转换旰使用MVVM特性,整体上和控制菜单的几种模式类似.首先 ...
- oracle日期计算
查询某月有多少天.代码例如以下: select to_number(add_months( trunc(to_date('2014-11-4 11:13:53','yyyy-mm-dd hh24:mi ...
- HDU ACM 1078 FatMouse and Cheese 记忆化+DFS
题意:FatMouse在一个N*N方格上找吃的,每一个点(x,y)有一些吃的,FatMouse从(0,0)的出发去找吃的.每次最多走k步,他走过的位置能够吃掉吃的.保证吃的数量在0-100.规定他仅仅 ...
- OC中语法糖,最新语法总结
<span style="font-size:24px;"> 1.方法与顺序无关 2.枚举绑定数据类型 enum { ObjectiveC, Java, Ruby, P ...
- 使用DataReader
string sqlStr="select * from tb_news"; SqlCommand myCmd=new SqlCommand(sqlStr,myConn); myC ...
- 集合运算符之全集、交集、补集【weber出品必属精品】
集合的概念 与数学中的全集.交集.补集的概念是一样的 常用的集合运算符 集合运算符的作用:把两个查询构造为一个联合查询 1. 全集:求连个查询的全集 union all:将两个查询的所有数据全部列出, ...
- C#获取客户端相关信息
1.获取Uri参数 2.获取客户端操作系统.浏览器信息 3.获取客户端分辨率 4.C#判断用户是手机访问还是PC访问
- Http Clinet使用
Http Client是个apache下的一个开源包,用于使用http协议访问服务的java代码编写. Http Client的主要功能: (1)实现了所有 HTTP 的方法(GET,POST,PUT ...
- 基尔霍夫矩阵题目泛做(AD第二轮)
题目1: SPOJ 2832 题目大意: 求一个矩阵行列式模一个数P后的值.p不一定是质数. 算法讨论: 因为有除法而且p不一定是质数,不一定有逆元,所以我们用辗转相除法. #include < ...
- Linux 下源码安装JDK
一,找到.tar.gz源码包 将jdk1.XXXXXXX.tar.gz源码包放在你想方的位置,比如我就放到u盘的 1, mkdir /mnt/udisk ...