XMLHttpRequest可以提供不重新加载页面的情况下更新网页

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head runat="server">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <script src="jquery-1.7.min.js" type="text/javascript"></script>
  6. <title>解析XMLHttpRequest</title>
  7. </head>
  8. <body>
  9. <form id="form1" runat="server">
  10. <div>
  11. <input type="text" name="search" id="search" />
  12. <input type="button" name="go" id="go" value="搜索" />
  13. <div id="result"></div>
  14. </div>
  15. </form>
  16. </body>
  17. </html>
  18. <script type="text/javascript">
  19. var xhr = null;
  20. $(function () {
  21. $("#go").click(function () {
  22. var str = $("#search").val();
  23. if ($.trim(str) == "") {
  24. $("#result").html("请输入要搜索的内容.");
  25. }
  26. else {
  27. _search(str);
  28. }
  29. });
  30. });
  31. function _search(str) {
  32. // 对于 IE7+, Firefox, Chrome, Opera, Safari
  33. if (window.XMLHttpRequest) {
  34. xhr = new XMLHttpRequest();
  35. }
  36. //对于 IE6, IE5
  37. else if (window.ActiveXObject) {
  38. xhr = new ActiveXObject("Microsoft.XMLHTTP");
  39. }
  40. else {
  41. //xhr = new ActiveXObject("Msxml2.XMLHTTP");
  42. $("#result").html("您的浏览器不支持XMLHttpRequest");
  43. }
  44. xhr.onreadystatechange = _CallBack;
  45. xhr.open("post", "/Search.aspx?q=" + str, true);
  46. xhr.send();
  47. }
  48. function _CallBack() {
  49. if (xhr.readyState == 4 && xhr.status == 200) {
  50. $("#result").html(xhr.responseText);
  51. }
  52. }
  53. </script>

//search.aspx.cs

  1. using System;
  2. namespace MyAjax
  3. {
  4. public partial class Search : System.Web.UI.Page
  5. {
  6. protected override void OnPreInit(EventArgs e)
  7. {
  8. if (!IsPostBack)
  9. {
  10. if (Request.QueryString["q"] != null)
  11. {
  12. string str = Request.QueryString["q"].ToString().Trim();
  13. //清空输出
  14. Response.Clear();
  15. //设置页面无缓存
  16. Response.Buffer = true;
  17. Response.ExpiresAbsolute = System.DateTime.Now.AddSeconds(-1);
  18. Response.Expires = 0;
  19. Response.CacheControl = "no-cache";
  20. Response.AppendHeader("Pragma", "No-Cache");
  21. Response.Cache.SetNoStore();
  22. Response.ClearContent();
  23. //输出
  24. Response.Write("您是不是要找：<br />" + str);
  25. //结束输出
  26. Response.End();
  27. }
  28. }
  29. }
  30. }
  31. }

//方法

abort()

取消当前响应，关闭连接并且结束任何未决的网络活动。

这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。

getAllResponseHeaders()

把 HTTP 响应头部作为未解析的字符串返回。

如果 readyState 小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回，一行一个头部。每行用换行符 "" 隔开。

getResponseHeader()

返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。

该方法的返回值是指定的 HTTP 响应头部的值，如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。

open()

//open(method, url, async, username, password)

初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。

send()

发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。

setRequestHeader()

向一个打开但未发送的请求设置或添加一个 HTTP 请求。

//属性

状态
名称
描述
0
Uninitialized
初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1
Open
open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2
Send
Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3
Receiving
所有响应头部都已经接收到。响应体开始接收但未完成。
4
Loaded
HTTP 响应已经完全接收。

简易解析ajax,javascript-XMLHttpRequest的更多相关文章

  1. javascript 解析ajax返回的xml和json格式的数据

    写个例子,以备后用 一.JavaScript 解析返回的xml格式的数据: 1.javascript版本的ajax发送请求 (1).创建XMLHttpRequest对象,这个对象就是ajax请求的核心 ...

  2. Ajax(javascript)案例

    一.注册案例(Get方式) 1.前台 <%@ page language="java" import="java.util.*" pageEncoding ...

  3. 原生Ajax（XMLHttpRequest）

    一.什么是Ajax: 全称Asynchronous JavaScript and XML: 异步的 JavaScript 和 XML: 可以在不重新加载整个页面的情况下(偷偷发数据),与服务器交换数据 ...

  4. AJAX初探,XMLHttpRequest介绍

    AJAX初探,XMLHttpRequest介绍 AJAX      AJAX = Asynchronous JavaScript and XML. 异步的JavaScript和XML.      AJ ...

  5. Egret和Http请求 (Ajax、XMLHttpRequest、Post、Get)

    一  Http请求 二  AJax和XMLHttpRequest 三  一个Ajax例子 四 Egret中的egret.HttpRequest 五 Post和Get区别 一 Http请求 Http深入 ...

  6. AJAX（XMLHttpRequest）进行跨域请求方法详解

    AJAX(XMLHttpRequest)进行跨域请求方法详解(三) 2010年01月11日 08:48:00 阅读数:24213 注意:以下代码请在Firefox 3.5.Chrome 3.0.Saf ...

  7. 原生ajax、XMLHttpRequest和FetchAPI简单描述

    什么是ajax ajax的出现,刚好解决了传统方法的缺陷.AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个 ...

  8. jQuery解析AJAX返回的html数据时碰到的问题与解决

    $.ajax({ type : "post", url : "<%=request.getContextPath()%>/ce/articledetail/m ...

  9. How to get blob data using javascript XmlHttpRequest by sync

    Tested: Firefox 33+ OK Chrome 38+ OK IE 6 -- IE 10 Failed Thanks to 阮一峰's blog: http://www.ruanyifen ...

随机推荐

  1. Maven仓库--Nexus的配置使用

    一.Nexus的作用 指定私服的中央地址.将自己的Maven项目指定到私服地址.从私服下载中央库的项目索引.从私服仓库下载依赖组件.将第三方项目jar上传到私服供其他项目组使用. 二.Nexus仓库 ...

  2. 「Python」7个不一样的代码写法

    打印index 对于一个列表,或者说一个序列我们经常需要打印它的index,一般传统的做法或者说比较low的写法: 更优雅的写法是多用enumerate 两个序列的循环 我们会经常对两个序列进行计算或 ...

  3. [Java多线程]-Thread和Runable源码解析

    多线程:(百度百科借一波定义) 多线程(英语:multithreading),是指从软件或者硬件上实现多个线程并发执行的技术.具有多线程能力的计算机因有硬件支持而能够在同一时间执行多于一个线程,进而提 ...

  4. TCP与UDP区别详解

    TCP协议与UDP协议的区别    首先咱们弄清楚,TCP协议和UCP协议与TCP/IP协议的联系,很多人犯糊涂了,一直都是说TCP/IP协议与UDP协议的区别,我觉得这是没有从本质上弄清楚网络通信! ...

  5. 前端PHP入门-023-重点日期函数之程序执行时间检测

    我们有的时经常需要做程序的执行时间执行效率判断. 实现的思路如下: <?php //记录开始时间 //记录结整时 // 开始时间 减去(-) 结束时间 得到程序的运行时间 ?> 可是大家不 ...

  6. 1.redis设计与实现--简单动态字符串

    1.redis没有使用c语言的字符串表示,而是使用更加适合自己的SDS(simple dynamic string),简单动态字符串,结构如下: 2.sys与c字符串的对比: 3.总结: redis采 ...

  7. PHP提取链接批量下载

    2014年年初的时候,曾经受委托完成一个视频网站,那时最大的技术障碍是一个大视频比如500MB,在一个带宽环境不怎么快的服务器(比如1Mbps)上提供播放的问题. 这里会遇到两种情况,第一种情况是客户 ...

  8. CSS 定位相关属性 ：position

    我们平时经常用margin来进行布局,但是遇到一些盒子不规律布局时,用margin就有点麻烦了,这个时候我们可以用position. position:参数 参数分析: 一.absolute: 相对父 ...

  9. 朋友封装的一个ASP.NET上传文件的方法

    朋友做了asp.net开发多年,做了这个,自我感觉封装得还不错!!! 代码如下: #region 上传文件的方法 /// <summary> /// 上传文件方法 /// </sum ...

  10. 下载Google My Tracks

    http://code.google.com/p/mytracks/source/browse/?name=2.0.2#hg%2FMyTracks%253Fstate%253Dclosed 需要类似的 ...