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. apk文件签名绕过

    声明: 1.本文转载自:http://www.2cto.com/Article/201311/256406.html,为了留作日后参考上传博客 2.如有转载请复试上面连接,尊重原创 apk文件签名绕过 ...

  2. 线上Redis偶发性链接失败排查记

    问题过程 输入法业务于12月12日上线了词库接受业务,对部分用户根据用户uuid判断进行回传,在12月17日早上8点多开始出现大量的php报错(Redis went away),报错导致了大量的链接积 ...

  3. Tensorboard教程：Tensorflow命名空间与计算图可视化

    Tensorflow命名空间与计算图可视化 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 强烈推荐Tensorflow实战Google深度学习框架 实验平台: Tensorflow ...

  4. 2017 国庆湖南Day2

    期望得分:100+30+100=230 实际得分:100+30+70=200 T3 数组开小了 ..... 记录 1的前缀和,0的后缀和 枚举第一个1的出现位置 #include<cstdio& ...

  5. 51nod 1449 砝码称重 （进制思想）

    1449 砝码称重 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题  收藏  关注 现在有好多种砝码,他们的重量是 w0,w1,w ...

  6. 数学：Nim游戏和SG函数

    有若干堆石子,两人轮流从中取石子,取走最后一个石子的人为胜利者 以下的性质是显然的 .无法移动的状态是必败态 .可以移动到必败态的局面一定是非必败态 .在必败态做所有操作的结果都是非必败态 在普通Ni ...

  7. Linux Shell 程序调试

    Linux Shell 程序调试 Shell程序的调试是通过运行程序时加入相关调试选项或在脚本程序中加入相关语句,让shell程序在执行过程中显示出一些可供参考的“调试信息”.当然,用户也可以在she ...

  8. ⑤ 设计模式的艺术-05.原型（Prototype）模式

    场景 思考一下:克隆技术是怎么样的过程? 克隆羊多利大家还记得吗? javascript语言中的,继承怎么实现?那里面也有prototype,大家还记得吗? 原型模式 通过new产生一个对象需要非常繁 ...

  9. [译]Quartz 框架 教程（中文版）2.2.x 之第二课 Quartz API,Jobs和Triggers简介

    第二课:QuartzAPI,Jobs和Triggers简介 Quartz API Quartz API 关键的几个接口: Scheduler:跟任务调度相关的最主要的API接口. Job:你期望任务调 ...

  10. Calendar 日期类介绍

    Calendar c = Calendar.getInstance();//创建实例 默认是当前时刻 c.get(Calendar.YEAR); c.get(Calendar.MONTH); c.ge ...