Jquery-AJAX进阶

首先ASP.NET中有一个问题

前台可以随意访问后台CS文件中定义的变量,但是反过来就不行,我想这是因为ASP.NET是编译型的语言,动态生成了一次性的HTML文件,浏览器拿到的时候就已经是完全的HTML,简单来说就是CS先执行,HTML后执行,所以CS无法访问html中的变量,CS运行的时候,html还没生成呢,所以我们需要AJAX,js来实现后端CS,操作前端HTML的文档,实现非常复杂的操作

关键的几个函数

xmlhttp = new XMLHttpRequest();

xmlhttp.open("GET","index.asp",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send();

xmlhttp.onreadystatechange

xmlhttp.responseText

xmlhttp.resposeXML

每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息

关键的几段代码(面试必背代码)

  1. var xmlhttp; // 声明一个对象
  2. if (window.XMLHttpRequest)
  3. {// code for IE7+, Firefox, Chrome, Opera, Safari
  4. xmlhttp=new XMLHttpRequest(); // 创建一个异步对象
  5. }
  6. else
  7. {// code for IE6, IE5
  8. xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  9. }
  1. xmlhttp.onreadystatechange=function() // 设置onreadystatechange事件
  2. {
  3. if (xmlhttp.readyState==4 && xmlhttp.status==200) // 关于readystate的请求状态码,0表示异步对象创建,1=设置参数,2=发送请求报文,3=接受响应报文,4=响应报文接受完毕
  4. {
  5. document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  6. }
  7. }
  8. xmlhttp.open("GET","test1.txt",true);
  9. xmlhttp.send();

小技巧:

windows.onload(){

在页面加载完成后,在运行这里的函数

}

1.等同于jQuery的$(document).ready(){   }

和$(function(){});

2.一个页面中只能有一个windows.onload,后面再加一个的话,会覆盖前面的一个函数

请注意

当您使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可

如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

一个测试过的AJAX例子

index.aspx页面

  1. <h1 id="new" >再次测试</h1>
  2. <input type="button" value="测试ajax" onclick="showHint()" />

ajax.js页面

  1. function showHint() {
  2. var xmlhttp;
  3. if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  4. xmlhttp = new XMLHttpRequest();
  5. }
  6. else {// code for IE6, IE5
  7. xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  8. }
  9. xmlhttp.onreadystatechange = function () {
  10. if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  11. document.getElementById("new").innerHTML = xmlhttp.responseText;
  12. }
  13. }
  14. xmlhttp.open("get", "text.aspx?q=jingySSSa", true);
  15. xmlhttp.send();
  16. }

跳转到text.aspx页面

下面这段代码放到page_load函数或者页面的<% %>都一样,他们只是加载的先后顺序不同而已

  1. string name = Request.QueryString["q"].ToString() + "这一段是新加入的文字";
  2. // Response.Clear(); 这个clear加不加都可以,无所谓
  3. Response.Write(name);
  4. Response.End(); //之前可以加Response.close(),也可以不加

Response用于回应浏览器,告诉浏览器回应内容的报头、服务器的状态信息和输出指定的内容。

(1)  Response.ContentType = "text/html"    // 测试成功

设定输出内容的类型。

字符串格式为type/subtype,type表示内容的分类,subtype则表示特定内容类型,再如"image/gif"

(2)  Response.Clear()方法

删除所有缓存中的HTML输出。但此方法只删除Response显示输出信息,不删除response头信息。

(3)  Response.ClearContent()方法

不仅像Clear()方法那样删除Response显示输出信息,而且还删除Response头信息。

(4)  Response.ClearHeader()方法

仅删除Response头信息

(5)  Response.Expires=number   // 这个搞不懂

设定页面在浏览器Cache中失效的时间长度(单位为分钟),如果用户在其失效之前返回到同一个画面,则显示Cache中的页面。

(6)  Response.ExpiresAbsolute=DateTime

设定页面在浏览器Cache中失效的具体时间。例:Response.ExpiresAbsolute=DateTime.Now,表示马上过期。

(7)  Response.Buffer=bool

设定页面是否进行缓冲。默认是True。

如有缓冲,则服务器在当前处理的页面上的语句被处理之前,不将Response语句发送给客户端,除非有Flush()或End()方法调用。

(8)  Response.Flush()方法

立即将缓区中的页面输出。

(9)  Response.End()方法

使Web服务器停止当前的程序并返回结果,剩下的文件内容是没有处理的。

(10)  Response.Write()方法

输出指定的文本内容。例:Response.Write("Hello!")

(11)  Response.BinaryWrite()方法

将指定的信息不进行字符转换,直接写到当前的HTTP输出。此方法可用来自来非字符数据,如某些应用程序要求的二进制数据。

(12)  Response.WriteFile()方法

直接将输出内容写入一个文件。例:Response.WriteFile("D://abc.txt")    // 这个也不会用

注:写入的文件在写入之前必须存在。

JQuery AJAX里面的方法有哪些?都是怎么实现的?

jquery的ajax方法中的each的用法


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<script>

              $("#search").click(function () {

                  var company = $("#companies").val();

                  var dept = $("#depts").val();

                  var info = { "company": company, "dept": dept };

                  var infoJson = JSON.stringify(info);

                  $.ajax({

                      url: "/Manage/TransferPersonSearch",

                      dataType: "json",

                      cache: false,

                      data: infoJson,

                      type: "POST",

                      success: function (response) {

                          var jsondata = JSON.parse(response);

                          $.each(jsondata["UIViewModeList"], function (key, item) {

                              $("#transferPersonTable").append("<tr><td>" + item["ADName"] +

                             "</td><td>" + item["displayName"] + "</td><td>" +

                            item["Company"] +

                             "</td><td>" + item["Dept"] + "</td><td‘><input type=‘checkbox‘ id=" + item["ADName"] + "><td></tr>");

                          });

                      }

                  });

              });

</script>

来自为知笔记(Wiz)

时间: 2024-08-06 11:55:52

Jquery-AJAX进阶的相关文章

第一百七十四节,jQuery,Ajax进阶

jQuery,Ajax进阶 学习要点: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 在 Ajax 课程中,我们了解了最基本的异步处理方式.本章,我们将了解一下 Ajax 的 一些全局请求事件.跨域处理和其他一些问题. 一.加载请求 在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题.而超 过一定时间的请求,用户就会变得不再耐烦而关闭页面.而如果在请求期间能给用户一些提 示,比如:正在努力加载中...,那么相同的请求时

jQuery基础---Ajax进阶

原文:jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中,我们了解了最基本的异步处理方式.本篇来了解一下 Ajax 的一些全局请求事件.跨域处理和其他一些问题. 一.加载请求 在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题.而超过一定时间的请求, 用户就会变得不再耐烦而关闭页面. 而如果在请求期间能给用户一些提示,比如:

使用jquery Ajax实现上传附件功能

用过jquery的Ajax的人肯定都知道,Ajax的默认编码方式是"application/x-www-form-urlencoded",此编码方式只能编码文本类型的数据,因此Ajax发送请求的时候,会把data序列化成 一个个String类型的键值对,此种传输数据的方式能够满足大部分应用场景,然而当传输的数据里有附件的时候,此序列化机制便是我们的绊脚石.Ajax本身的序列化机制的硬伤归其原因在于在html4的时代,没有FileReader接口,在页面里无法读取File(Blob)文件

jquery ajax 方法及各参数详解

jquery ajax 方法及各参数详解 1.$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息. 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET".注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分

Django1.7+JQuery+Ajax集成小例子

Ajax的出现让Web展现了更新的活力,基本所有的语言,都动态支持Ajax与起服务端进行通信,并在页面实现无刷新动态交互. 下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证用户注册时,用户名存在不存在的一个小应用.注意,验证存在不存在使用的是Ajax的方式,不用让用户点击按钮验证是否存在. 截图如下: 页面HTML代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta

JQuery ajax 在aspx中传值和取值

传值:ajax中的data(json)  js代码: <script type="text/javascript"> $(function () { $("#btnAddNews").bind("click", function () { var _name= $.trim($("#txtNewTitle").val()); $.ajax({ type: "POST", url: "A

jquery ajax跨域的完美解决方法(jsonp方式)

ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquer

jQuery Ajax 全解析

jQuery Ajax 全解析 本文地址: jQuery Ajax 全解析 本文作者:QLeelulu 转载请标明出处! jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [d

jQuery Ajax -附示例

jQuery其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能. jQuery 不是生产者,而是大自然搬运工. jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject 注:2.+版本不再支持IE9以下的浏览器 时机: 如果发送的是[普通数据] -> jQuery,XMLHttpRequest,iframe 如果发送的是[文件] -> iframe,jQuery(FormData对象),XMLH

jQuery - AJAX (来源于W3C)

jQuery - AJAX 简介 AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新. 什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示. 使用 AJAX 的应用程序案例:谷歌地图.腾讯微博.优酷视频.人人网等等. 关于 jQuery 与 AJAX jQuery 提供多个与 AJAX 有