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. Leetcode 7. 整数反转（待整理）

    1.题目描述 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1: 输入: 123 输出: 321  示例 2: 输入: -123 输出: -321 示例 3: 输入: ...

  2. 《深入Java虚拟机》笔记

    当运行一个Java程序的同时,也就在运行了一个Java虚拟机实例.Java虚拟机实例通过调用某个初始类的mian()方法来运行一个Java程序运行中Java程序的每一个线程都是一个独立的虚拟机执行引擎 ...

  3. Vue.js和angular.js区别

    Vue.js:易学 简单 指令以v.xxx 一片HTML代码配合json,在new出来Vue,js实例 个人维护项目 适用于移动端 应用超越了angular angular.js:上手难 指令以ng. ...

  4. [Luogu 1197] JSOI2008 星球大战

    [Luogu 1197] JSOI2008 星球大战 我算是真的沦为联赛选手了. 并查集裸题. 比较麻烦的是删点. 但是从后往前加点就好操作很多. 所以考虑离线,先存图,然后没被删的点之间,有边就合并 ...

  5. iOS 监听UILabel点击

    label.userInteractionEnabled = YES; // 一定要设置 [label addGestureRecognizer:[[UITapGestureRecognizer al ...

  6. Javascript动态绑定

    <div onclick="test()"></div> <script> function test(){ //code } </scr ...

  7. jQuery技术内幕 深入解析jQuery架构设计与实现原理

    jquery的外衣 jquery是一个轻量级的JS框架 //以下截取自jquery源码片段 (function( window, undefined ) { /* 源码内容 */ })( window ...

  8. 【BZOJ】3524: [Poi2014]Couriers

    [算法]主席树 [题解]例题,记录和,数字出现超过一半就递归查找. 主席树见[算法]数据结构 #include<cstdio> #include<algorithm> #inc ...

  9. 详细说说如何生成验证码—ASP.NET细枝末节（4）

    前言 今天小编详细的说一下,ASP.NET网站开发过程中生成验证码的全部问题. 本文的目标,是让读者了解,生成验证码涉及的全部基础知识问题. 当然这里说的是比较简单的验证码. 真正符合要求的验证码,涉 ...

  10. MQTT协议及推送服务

    MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的“轻量级”通讯协议,该协议构建 ...