Jquery-AJAX进阶

Posted 2020-06-26

首先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 的状态信息

关键的几段代码（面试必背代码）

var xmlhttp;    // 声明一个对象
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();     //  创建一个异步对象
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.onreadystatechange=function()    //  设置onreadystatechange事件
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)  // 关于readystate的请求状态码，0表示异步对象创建，1=设置参数，2=发送请求报文，3=接受响应报文，4=响应报文接受完毕
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

小技巧：

windows.onload(){

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

}

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

和$(function(){});

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

请注意

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

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

一个测试过的AJAX例子

index.aspx页面

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

ajax.js页面

function showHint() {
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("new").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("get", "text.aspx?q=jingySSSa", true);
    xmlhttp.send();
}

跳转到text.aspx页面

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

            string name = Request.QueryString["q"].ToString() + "这一段是新加入的文字";
            //  Response.Clear();    这个clear加不加都可以，无所谓
            Response.Write(name);
            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)