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. 用递归翻转一个栈 Reverse a stack using recursion

    明白递归语句之前的语句都是顺序运行,而递归语句之后的语句都是逆序运行 package recursion; import java.util.Stack; public class Reverse_a ...

  2. LB集群

    LB集群   1. LB.LVS介绍LB集群是load balance 集群的简写,翻译成中文就是负载均衡集群LVS是一个实现负载均衡集群的开源软件项目 LVS架构从逻辑上可分为调度层(Directo ...

  3. 用JS来计算百钱买百鸡

    怎样用一百块买一百只鸡?已知公鸡5块一只,母鸡3块一只,小鸡一块钱3只: 需要用到for循环嵌套,并且通过优化代码,可以加快运行效率. <!DOCTYPE html> <html l ...

  4. DEV LookUpEdit 使用方法

    public class field { public string Name { get; set; } public string Explain { get; set; } } List< ...

  5. Oracle关联查询关于left/right join的那点事

    /*题外话 --更改foreign key约束定义引用行(delete cascade/delete set null/delete no action),默认delete on action--引用 ...

  6. 找不到类型“IBatisService.boxManageService”,它在 ServiceHost 指令中提供为 Service 特性值,或在配置元素 system.serviceModel/serviceHostingEnvironment/serviceActivations 中提供。

    找不到类型“IBatisService.boxManageService”,它在 ServiceHost 指令中提供为 Service 特性值,或在配置元素 system.serviceModel/s ...

  7. 二维码生成 - QrCodeNet

    下载QrCodeNet /// <summary> /// 生成QR码 /// </summary> /// <param name="output_path& ...

  8. MFC线程(三):线程同步事件(event)与互斥(mutex)

    前面讲了临界区可以用来达到线程同步.而事件(event)与互斥(mutex)也同样可以做到. Win32 API中的线程事件 HANDLE hEvent = NULL; void MainTestFu ...

  9. CF 8D Two Friends 【二分+三分】

    三个地点构成一个三角形. 判断一下两个人能否一起到shop然后回家,如果不能: 两个人一定在三角形内部某一点分开,假设沿着直线走,可以将问题简化. 三分从电影院出来时候的角度,在对应的直线上二分出一个 ...

  10. html中embed标签的用法

    (一).基本语法: embed src=url 说明:embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.MP3等等,Netscape及新版的IE 都支持.url为音频或视 ...