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如何异步提交数据?的更多相关文章

  1. jQuery选取所有复选框被选中的值并用Ajax异步提交数据

    昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...

  2. JQuery中使用FormData异步提交数据和提交文件

    web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一 ...

  3. ASP模拟POST请求异步提交数据的方法

    这篇文章主要介绍了ASP模拟POST请求异步提交数据的方法,本文使用MSXML2.SERVERXMLHTTP.3.0实现POST请求,需要的朋友可以参考下 有时需要获取远程网站的某些信息,而服务器又限 ...

  4. Ajax.BeginForm的异步提交数据 简介

    Html.BeginForm与Ajax.BeginForm都是MVC架构中的表单元素,它们从字面上可以看到区别,即Html.BeginForm是普通的表单提交,而Ajax.BeginForm是支持异步 ...

  5. 表单(同步提交)和AJAX(异步提交)示范

    表单提交(同步提交) HTML文件: PHP文件: 这样就能接收到HTML里输入的内容,注意: FORM表头method为POST,PHP文件获取的方法就是$_POST,method为GET,PHP的 ...

  6. 通过ajax给后台提交数据时,radio性别数据的获取

    通过ajax向后台异步发送数据,经常我们会遇到个人信息额提交,一般我们采用FormData来装数据.在装性别值得时候,我们会有两个radio框,获取radio值得方法如下: 一般情况下,一个radio ...

  7. JQuery 异步提交数据

    类别添加   名称:  &nbsp 正在发送数据请求… <% dim strValue blnLogin = false; strValue = request.Form("t ...

  8. MVC—实现ajax+mvc异步获取数据

    之前写过ajax和一般处理程序的结合实现前后台的数据交换的博客,如今做系统用到了MVC,同一时候也用到了异步获取数据. ajax+一般处理程序与MVC+ajax原理是一样的在"URL&quo ...

  9. 使用bean接收ajax表单提交数据包含文件上传

    这几天写带图片上传的表单提交,一个配置小程序活动弹出框样式的功能,记录一下一些需要注意的地方 首先是 前端 JSP 文件的表单 <form class="search-wrapper& ...

随机推荐

  1. 浏览器内核Trident/Gecko/WebKit/Presto

    “浏览器内核”主要指渲染引擎(Rendering Engine),负责解析网页语法(如HTML.JavaScript)并渲染.展示网页.因此,所谓的浏览器内核通常也就是指浏览器所采用的渲染引擎, 渲染 ...

  2. 3DShader之移位贴图(Displacement Mapping)

    我们知道法线贴图是只是改了物体的法线属性,用来计算光照,但是并没有改变物体本身的网格.但是移位贴图就不一样了,它会移动物体的顶点.我用移位贴图做了个海洋,好了,上了图再讲: 注意看海的边缘的顶点,已经 ...

  3. Android 编程下的计时器

    在安卓 APP 的手机号注册逻辑中,经常会有将激活码发送到手机的环节,这个环节中绝大多数的应用考虑到网络延迟或服务器压力以及短信服务商的延迟等原因,会给用户提供一个重新获取激活码的按钮.如下图所示: ...

  4. Android Notification使用及取消

    //发送通知 NotificationManager manger = (NotificationManager) this.getSystemService(NOTIFICATION_SERVICE ...

  5. Spark 初级算子

    #常用Transformation(即转换,延迟加载) #通过并行化scala集合创建RDD val rdd1 = sc.parallelize(Array(1,2,3,4,5,6,7,8)) #查看 ...

  6. Linux基础知识(二)

    1. 请回答,32位和64位有什么区别呢?什么时候安装32位的,又什么时候安装64位操作系统呢?如何查看系统是32位的还是64位的? 所谓的32位.64位指的是CPU的GPRs(General-Pur ...

  7. 普通用户之间的ssh无密码访问设置方法

    两台CentOS6.2服务器,客户端是node1,服务器是node2,先都用root用户配置,方法如下: 第一步:在客户端Node1:生成密匙对,我用的是rsa的密钥.使用命令 "ssh-k ...

  8. dug

    http://blog.csdn.net/ysy441088327/article/details/8992393 http://www.cnblogs.com/Leo_wl/p/4423922.ht ...

  9. ZJOI 最小割 CQOI 不同的最小割 (最小割分治)

    题目1 ZJOI 最小割 题目大意: 求一个无向带权图两点间的最小割,询问小于等于c的点对有多少. 算法讨论: 最小割 分治 代码: #include <cstdlib> #include ...

  10. MDX示例:求解中位数、四分位数(median、quartile)

    一个人力资源咨询集团通过网络爬虫采集手段将多个知名招聘网站上发布的求职和招聘等信息准实时采集到自己的库里,形成一个数据量浩大的招聘信息库,跟踪全国招聘和求职的行业.工种.职位.待遇等信息,并通过商业智 ...