首页 > 代码库 > Ajax

Ajax

2024-07-21 05:42:22   218人阅读

本篇主要记入一些基本和常使用到的ajax方法

服务端是用 asp.net ashx 来接收的。

js部分不考虑游览器兼容的问题. 

 

简单的理解 , ajax就是发送http请求，而不重启或刷新页面。

这里从发送一个ajax请求还有一个 http 头说起吧 

        var xhr = new XMLHttpRequest();         xhr.open("GET", "//localhost:5715/learn/ajax/ajaxhand.ashx", true);         xhr.setRequestHeader("Content-Type", "application/json"); 必须在open之后才能set哦           xhr.setRequestHeader("customHeader", "value");        xhr.send(null);

整个请求都是依靠这个 XMLHttpRequest 实例对象来完成的。

open 方法

-参数1是请求的类型method, 比如 GET,POST,PUT,DELETE 等

-参数2是请求的网址 

-参数3是表示是否是一个异步请求. 

setRequestHeader 方法 (必须在open之后才能set哦)

请求时发送给服务端的头信息 name 和 value 

我们可以自定义一些请求头

send 方法

参数1是请求时具体内容(body). 有head 就有 body嘛 , 但是GET请求就不可以有body哦，即使你放了也传不去后台。

参数除了string 还支持 ArrayBuffer ,Blod，FormData类型等 ..之后会讲到 

 

好了我们看看后台如何获取这些信息 

<%@ WebHandler Language="C#" Class="ajaxhand" %>using System;using System.Web;using MySql.Data.MySqlClient;using System.Data;using Newtonsoft.Json;using Newtonsoft.Json.Linq;using System.Collections.Generic;using System.Collections;using System.Web.SessionState;using System.Linq;using System.Reflection;using System.IO;using System.Text;using stooges_funcV3;using System.Collections.Specialized;public class ajaxhand : IHttpHandler {    public void ProcessRequest (HttpContext context)     {        //遍历header        NameValueCollection head = context.Request.Headers;        String[] headersKey = head.AllKeys;        foreach (string key in headersKey)        {            String[] values = head.GetValues(key);            string value = http://www.mamicode.com/values[0]; //通常只有一个        }                  context.Response.ContentType = "text/plain";        context.Response.Write("Hello World");           }     public bool IsReusable {        get {            return false;        }    }}
View Code

整体大致上是这样，我们通过偏离header就可以完全获取header资料了. 

除了header 我们还常会通过urlParams来做传信息,比如 

        var urlParams = "?" + encodeURIComponent("k ey") + "=" + encodeURIComponent("v alue"); //?a%20b=b%20c  记得要加密        xhr.open("GET", "//localhost:5715/learn/ajax/ajaxhand.ashx" + urlParams, true);
        string value = http://www.mamicode.com/context.Request["k ey"];        string value2 = context.Request.QueryString["k ey"];         string[] allkeys = context.Request.QueryString.AllKeys; //遍历        foreach (string key in allkeys)        {                    string paravalue =http://www.mamicode.com/ context.Request.QueryString[key];        }

还有 cookie 

        string[] keys = context.Request.Cookies.AllKeys;        foreach (string key in keys)        {            string x = context.Request.Cookies[key].Value.ToString();        }

到此我们先说说响应的部分了 

        var xhr = new XMLHttpRequest();        xhr.onreadystatechange = function () {            if (xhr.readyState == 1) {                console.log("open"); //调用了open方法            }            else if (xhr.readyState == 4) { //3表示接收到了响应但是没有完成 , 4则表示响应已完成。                 if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304) {                                      console.log(xhr.responseText); //响应的返回值                }                else {                    console.log("ajax fail");                }            }                    }        xhr.open("GET", "//localhost:5715/learn/ajax/ajaxhand.ashx", true);        //xhr.setRequestHeader("Content-Type", "application/json");                  xhr.send(null);

监听 onreadystatechange 

readyState 表示 xhr当前的状态 . 

1代表open被调用了。

3代表接收到响应了，但还不完整(可以用这个做http流,之后可能会讲到)

4代表已经完成. 

xhr.status 就是需要返回代号。 比如404表示找不到地址,这个熟了吧 . 

一般200表示很好。 304 表示请求的资料本地缓存还没有过期可以直接使用。

xhr.responseText 就是我们要的数据啦.  

        context.Response.ContentType = "text/plain";        context.Response.Write("Hello World");

服务端的响应大概是这样的。 

上面都是在说GET，现在我们来写一个POST请求看看

xhr.open("POST", "//localhost:5715/learn/ajax/ajaxhand.ashx", true);
xhr.send("hello"); //纯字符串 

服务端 :

 string method = HttpContext.Current.Request.HttpMethod; //POST
 StreamReader reader = new StreamReader(context.Request.InputStream, Encoding.UTF8); string value = http://www.mamicode.com/reader.ReadToEnd();  //hello

表明是contentType 是 FormData

        xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘); //表明是form格式        var someData = http://www.mamicode.com/encodeURIComponent("a b") + "=" + encodeURIComponent("b c"); //?a%20b=b%20c 要key=value 和加密哦        xhr.send(someData);

服务端 : 

  string value = http://www.mamicode.com/context.Request["a b"]; //b c 一样拿的到  string value2 = context.Request.QueryString["a b"]; //null QueryString只能拿到url的params

服务端在获取的时候最好先判断 contentType 来决定用什么方式获取资料，比如json的话要反序列化等等。 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
Ajax






























        

            
                
                  
                
                

                    联系

                    我们