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. need

    php面试题: http://lib.csdn.net/article/php/43624 小程序: 官方手册: https://mp.weixin.qq.com/debug/wxadoc/dev/d ...

  2. Nginx--try_files

    Nginx的配置语法灵活,可控制度非常高.在0.7以后的版本中加入了一个try_files指令,配合命名location,可以部分替代原本常用的rewrite配置方式,提高解析效率.   作用域:se ...

  3. 2017北京国庆刷题Day7 morning

    期望得分:100+0+100=200 实际得分:100+20+0=120 离散化搞搞 #include<cstdio> #include<iostream> #include& ...

  4. 动态规划：插头DP

    这种动归有很多名字,插头DP是最常见的 还有基于连通性的动态规划 轮廓线动态规划等等 超小数据范围,网格图,连通性 可能算是状态压缩DP的一种变式 以前我了解的状压DP用于NP难题的小数据范围求解 这 ...

  5. Eng1—English daily notes

    English daily notes 2015年 4月 Phrases As a side note 作为附注,顺便说句题外话,和by the way意思相近,例句 As a side note, ...

  6. 铺地砖|状压DP练习

    有一个N*M(N<=5,M<=1000)的棋盘,现在有1*2及2*1的小木块无数个,要盖满整个棋盘,有多少种方式?答案只需要mod1,000,000,007即可. //我也不知道这道题的来 ...

  7. 【CodeForces】908 E. New Year and Entity Enumeration

    [题目]E. New Year and Entity Enumeration [题意]给定集合T包含n个m长二进制数,要求包含集合T且满足以下条件的集合S数:长度<=m,非和与的结果都在集合中. ...

  8. C语言实现线性表(链式存储方式)

    #include <stdio.h> #include <stdlib.h> //提供malloc()原型 typedef struct LNode *List; typede ...

  9. koa源码阅读[2]-koa-router

    koa源码阅读[2]-koa-router 第三篇,有关koa生态中比较重要的一个中间件:koa-router 第一篇:koa源码阅读-0第二篇:koa源码阅读-1-koa与koa-compose k ...

  10. C++ Class与Struct的区别

    转自某楼层的回复http://bbs.csdn.net/topics/280085643 首先,讨论这个问题应该仅从语法上讨论,如果讨论不同人之间编程风格上的差异,那这个问题是没有答案的.毕竟不同的人 ...