AJAX(二)详解GET/POST请求

  上次是最简单的原生JS实现AJAX效果。不过,那简单的步骤不能适应各种不同的浏览器,尤其是万恶的IE,尤其是低版本的IE浏览器。本期就来搞定各个浏览器,以及其他各项参数的设置。

  一、服务端代码

  服务端代码仍然使用.NET一般处理程序,这次的逻辑略有改动,通过QueryString获取一个key为type的参数,旨在接下来演示AJAX通过GET方式传参。此type属性预设值为“DATE“/”TIME“,如果是”DATE”,服务端就返回当前日期(年月日),否则返回当前时间(时分秒)。 

public class TimeHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        string type = context.Request.QueryString["type"].ToUpper();
        if(type == "DATE")
        {
            context.Response.Write(DateTime.Now.ToLongDateString());
        }
        else
        {
            context.Response.Write(DateTime.Now.ToLongTimeString());
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

 二、客户端JS代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        window.onload = function () {
            var btn = document.getElementById("btnTime");
            btn.onclick = function () {
                ////1.声明异步对象
                var xhr = false;
                //2.根据浏览器类型,创建异步对象
                if (window.XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
                }
                else {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //3.从下拉选项框中获取用户选中的选项
                var type = document.getElementById("dType").value;
                //4.拼写url,把get请求传递的参数拼接到url后边
                var url = "timehandler.ashx" + "?type=" + type;
                //5.打开异步对象,并设置参数
                xhr.open("get", url, true);
                //6.设置setRequestHeader,不使用缓存数据
                xhr.setRequestHeader("If-Modified-Since", "0");
                //7.设置回调函数
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var h2 = document.getElementById("time");
                        h2.innerHTML = xhr.responseText;
                    }
                }
                //4.发送异步请求
                xhr.send(null);
            }
        }
    </script>
</head>
<body>
    <select id="dType">
        <option value="DATE">年月日</option>
        <option value="TIME">时分秒</option>
    </select>
    <h2 id="time"></h2>
    <button id="btnTime">点击</button>
</body>
</html>

  在客户端,用户通过选择select下拉框中的选项,然后点击btnTime按钮,获取服务器日期或时间。

  与最简化的版本相比,变化点有以下几个

  1.异步对象的创建。

  不同的浏览器对于XMLHttpRequest对象的支持不同,这里主要指的是IE,尤其是老版本的IE,它们不支持该对象。IE老版本的浏览器支持的是MS自家的对象ActiveXObject,所以在创建的时候要先做下判断,以兼容老版本IE浏览器。

  其中new ActiveXObject("Microsoft.XMLHTTP")时,传递的参数表示微软的xml语言解析器,用来解释xml语言的。就好像html文本下载到本地,浏览器会检查html的语法,解释html文本然后显示出来一样,不过不仅仅微软有。该也是有变化的,原因是微软在不同版本的浏览器中,对于该参数的解析也不同,所以也有人这么来创建异步对象

var xhr = false;
var msXmlVers = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp"];
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
    for (var i = 0; i < msXmlVers.length; i++) {
        xhr = new ActiveXObject(msXmlVers[i]);
        if (xhr) {
            break;
        }
    }
}

  其中msXmlVers是个数组,该数组的各个项是不同的msxml解析版本。不过这么写的人貌似不多。

  话又说回来了,现在谁还写原生的Javascript代码来做AJAX?所以这里我们了解就OK了,不求甚解了。

  2.GET请求传参

  AJAX对于Get请求和Post请求的传参方式是不同的。

  Get请求仍然通过url传参,参数仍然以键值对的形式传递。语法:url?key1=val1&key2=val2&key3=val3.....  ,与普通的get请求传出别无二致。

  3.禁用客户端缓存

  setRequestHeader是异步对象提供的一个重要的API,它是用来设置请求报文头的。

  这里:xhr.setRequestHeader("If-Modified-Since", "0");是通过设置请求报文头的"If-Modified-Since",来达到禁用客户端缓存数据的目的。  

  至于为什么要禁用客户端缓存数据?

  在http中Last-Modified 与If-Modified-Since 都是用于记录页面最后修改时间的 HTTP 头信息,注意,在这 Last-Modified 是由服务器往客户端发送的 HTTP 头,另一个 If-Modified-Since是由客户端往服务器发送的头,可以看到,再次请求本地存在的 cache 页面时,客户端会通过 If-Modified-Since 头将先前服务器端发过来的 Last-Modified 最后修改时间戳发送回去,这是为了让服务器端进行验证,通过这个时间戳判断客户端的页面是否是最新的,如果不是最新的,则返回新的内容,如果是最新的,则 返回 304 告诉客户端其本地 cache 的页面是最新的,于是客户端就可以直接从本地加载页面了,这样在网络上传输的数据就会大大减少,同时也减轻了服务器的负担。而且在一些ajax应用中,要求获取的数据永远是最新的,而不是读取位于缓存中的数据,做这样的设置是非常有必要的。

  那么除了这种方法禁用缓存数据以外,还有一个种方法,就是在请求的url上做手脚。比如:var url = "timehandler.ashx" + "?timestamp=" + new Date().getTime(); 

原文地址:https://www.cnblogs.com/ldq678/p/9202738.html

时间: 2024-10-31 00:56:29

AJAX(二)详解GET/POST请求的相关文章

触碰jQuery:AJAX异步详解

触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和XHTML来表示. 2)   使用DOM模型来交互和动态显示. 3)   使用XMLHttpRequest来和服务器进行异步通信. 4)   使用javascript来绑定和调用.

Jquery ajax 参数 详解

Jquery ajax 参数主要如下: url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步

触碰jQuery:AJAX异步详解(转)

AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和XHTML来表示. 2)   使用DOM模型来交互和动态显示. 3)   使用XMLHttpRequest来和服务器进行异步通信. 4)   使用javascript来绑定和调用. 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请

jquery中的ajax方法详解

定义和用法ajax() 方法通过 HTTP 请求加载远程数据.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性.最简单的情况下,$.ajax() 可以不带任何参数直接使用.注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置. 语法 jQuery.ajax([settings])

$.ajax()常用方法详解(推荐)

AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分.接下来通过本文给大家介绍ajax一些常用方法,大家有需要可以一起学习. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. 3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆

CSDN Android客户端开发(二):详解如何基于Java用Jsoup爬虫HTML数据

本文参考链接详细介绍如何使用Jsoup包抓取HTML数据,是一个纯java工程,并将其打包成jar包.希望了解如何用java语言爬虫网页的可以看下. 杂家前文就又介绍用HTTP访问百度主页得到html的string字符串,但html的文本数据如果不经过处理就是个文本字符串没有任何效果的.所谓的浏览器就是负责将文本的html"翻译"成看到的界面.在前文有介绍,这个csdn的客户端app分首页.业界.移动.研发.程序员.云计算五大类.以业界为例,http://news.csdn.net/ 

关于异步请求AJAX的详解

1,异步请求的方法步骤: 1,判断当前用户支持的浏览器类型 XMLHttpRequest:判断是否支持非IE浏览器,对应的创建方法:xmlhttp = new XMLHttpRequest(); window.ActiveXObject:判断是否支持IE浏览器,对应的创建方法:xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 2,开辟连接创建路径 xmlhttp.open(参数一,参数二,参数三); 参数一:请求的方式get  post

转载:Ajax基础详解&amp;&amp;http填坑2

这篇文章是网上看到的一片博文,比较干练的总结了AJAX的基础东西和相关的http的知识,适合AJAX入门. 同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式. 同步请求: 客户端请求(等待)->服务端处理->响应->页面载入 (缺少对象:XMLhttpRequest)这时候如果有错误,只能再次发送请求,再次等待 异步请求: 比如当你填

ajax入门详解

l 一个实例 在开始正式讲解 Ajax之前,首先让我们先来看看Google Map使用Ajax改善其产品设计的效果. 1. 在浏览器地址栏中输入http://maps.google.com打开Google Map的界面. 2. 在页面顶端的搜索框中输入“China”,单击“Search”按钮. 3. 单击地图右上角的“Satellite”按钮,切换到卫星界面. 4. 调整地图左上角的尺寸,方法或者缩小当前区域.可以看到,地图区域的图象根据标尺的位置快速的变换. 5. 按住鼠标左键,拖拽地图,地图