码迷,mamicode.com
首页 > Web开发 > 详细

Jquery-AJAX进阶

时间:2016-03-20 23:59:04      阅读:472      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

首先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>












Jquery-AJAX进阶

标签:

原文地址:http://www.cnblogs.com/weloveshare/p/5300054.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!