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. poj 3261 后缀数组 可重叠的 k 次最长重复子串

    Milk Patterns Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 16430   Accepted: 7252 Ca ...

  2. zabbix添加cpu使用率图形监控

    zabbix版本: 3.2.5 zabbix 自带的windows模板中没有监控cpu使用率的,可以在模板里自己添加 1. 配置 ---> 模板---> Template OS Windo ...

  3. 用Tensorflow实现多层神经网络

    用Tensorflow实现多层神经网络 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 Tensorflow机器学习实战指南 源代码请点击下方链接欢迎加星 ReLU激活函数/L1范数 ...

  4. 解决HTML5标签兼容的办法搜集

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...

  5. 优美的代码：do...while(0)

    1.背景 最近再看一个开源代码的时候,看到很多宏经常这么写的: #define XXX do{\ ...\ }) 一眼看到的时候就知道这一份代码执行一次,那么do...while还有什么意义呢?在查阅 ...

  6. Yii2 的 redis 应用

    在应用的时候需要先对yii2进行扩展安装 如果装有composer直接运行 php composer.phar require --prefer-dist yiisoft/yii2-redis 当然也 ...

  7. 转:国内优秀npm镜像推荐及使用

    原文:http://riny.net/2014/cnpm/ npm全称Node Package Manager,是node.js的模块依赖管理工具.由于npm的源在国外,所以国内用户使用起来各种不方便 ...

  8. 用sqoop将mysql的数据导入到hive表中

    1:先将mysql一张表的数据用sqoop导入到hdfs中 准备一张表 需求 将 bbs_product 表中的前100条数据导 导出来  只要id  brand_id和 name 这3个字段 数据存 ...

  9. 【洛谷 P4134】 [BJOI2012]连连看（费用流）

    题目链接 首先是可以\(O(n^2)\)枚举出所有符合要求的点对的,然后考虑建图. 还是拆点把每个点拆成入点和出点,源点连入点,出点连汇点,流量都是1,费用都是0. 然后对于没对符合要求的\((x,y ...

  10. Intersection(HDU5120 + 圆交面积）

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5120 题目: 题意: 求两个圆环相交的面积. 思路: 两个大圆面积交-2×大圆与小圆面积交+两小圆面 ...