原文发布时间为：2009-11-15 —— 来源于本人的百度文章 [由搬家工具导入]

不用框架使用ajax 纯js使用ajax post，get范例及其区别

========================范例====================================

页面default5.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JS AJAX .http://hi.baidu.com/handboy</title>
</head>
<body>

    <script type="text/javascript">
        var xmlHttp;
        function createxmlHttpRequest()
        {
            if(window.ActiveXObject)
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            else if(window.XMLHttpRequest)
                xmlHttp = new XMLHttpRequest();
        }
        function createQueryString()
        {
            var firstName = document.getElementById("firstName").value;
            var birthday = document.getElementById("birthday").value;
            var queryString = "firstName="+firstName+"&birthday="+birthday;
            return encodeURI(encodeURI(queryString));//防止乱码
        }
        function doRequestUsingGet()
        {
            createxmlHttpRequest();
            var queryString = "AjaxHandler.ashx?";
            queryString+=createQueryString()+"&timestamp="+new Date().getTime();
            xmlHttp.open("GET",queryString);
            xmlHttp.onreadystatechange = handleStateChange;
            xmlHttp.send(null);
        }
        function doRequestUsingPost()
        {
            createxmlHttpRequest();
            var url ="AjaxHandler.ashx?timestamp="+new Date().getTime();
            var queryString = createQueryString();
            xmlHttp.open("POST",url);
            xmlHttp.onreadystatechange = handleStateChange;
            xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xmlHttp.send(queryString);
        }
        function handleStateChange()
        {
            if(xmlHttp.readyState==4 && xmlHttp.status == 200)
            {
                var responseDiv = document.getElementById("serverResponse");
                responseDiv.innerHTML=decodeURI(xmlHttp.responseText);
            }
        }
    </script>

    <form id="form1" runat="server">
        <input id="firstName" type="text" /><br />
        <input id="birthday" type="text" /><br />
        <br />
        <input id="get" type="button" value="get" onclick="doRequestUsingGet();" style="width: 64px" />
        &nbsp;
        <input id="post" type="button" value="post" onclick="doRequestUsingPost();" style="width: 75px" /><br />
        &nbsp;<div id="serverResponse">
        </div>
    </form>
</body>
</html>

添加新项===>一般处理程序 AjaxHandler.ashx   红色部分是添加的部分，其他vs都会默认写好的

<%@ WebHandler Language="C#" Class="AjaxHandler" %>

using System;
using System.Web;

public class AjaxHandler : IHttpHandler {
   
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        if (context.Request.HttpMethod == "POST")
        {
            context.Response.Write("POST:" + context.Request["firstName"]);
        }
        else if (context.Request.HttpMethod == "GET")
        {
            context.Response.Write("GET:" + context.Request["firstName"]);
        }
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

========================区别====================================

1:

GET访问 浏览器 认为 是等幂的
就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配]
所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结果

POST则 认为是一个 变动性 访问 （浏览器 认为 POST的提交 必定是 有改变的）

防止 GET 的 等幂 访问 就在URL后面加上 ？+new Date();，[总之就是使每次访问的URL字符串不一样的]

设计WEB页面的时候 也应该遵守这个原则

2:

一.谈Ajax的Get和Post的区别

   Get方式:
   用get方式可传送简单数据，但大小一般限制在1KB下，数据追加到url中发送（http的header传送），也就是说，浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是，它会被客户端的浏览器缓存起来，那么，别人就可以从浏览器的历史记录中，读取到此客户的数据，比如帐号和密码等。因此，在某些情况下，get方法会带来严重的安全性问题。

   Post方式:
   当使用POST方式时，浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器，而不是作为URL地址的参数进行传递，使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。

   总之，GET方式传送数据量小，处理效率高，安全性低，会被缓存，而POST反之。

使用get方式需要注意：
1 对于get请求（或凡涉及到url传递参数的），被传递的参数都要先经encodeURIComponent方法处理.例：var url = "update.php?username=" +encodeURIComponent(username) + "&content=" +encodeURIComponent

(content)+"&id=1" ;

使用Post方式需注意：
1.设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量.通常使用XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x-www-form-urlencoded;")。例：

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2.参数是名/值一一对应的键值对,每对值用&号隔开.如 var name=abc&sex=man&age=18，注意var name=update.php?

abc&sex=man&age=18以及var name=?abc&sex=man&age=18的写法都是错误的;
3.参数在Send(参数)方法中发送,例： xmlHttp.send(name); 如果是get方式，直接 xmlHttp.send(null);

4.服务器端请求参数区分Get与Post。如果是get方式则$username = $_GET["username"]; 如果是post方式，则$username = $_POST["username"];

AJAX乱码问题

产生乱码的原因:
1、xtmlhttp 返回的数据默认的字符编码是utf-8，如果客户端页面是gb2312或者其它编码数据就会产生乱码
2、post方法提交数据默认的字符编码是utf-8，如果服务器端是gb2312或其他编码数据就会产生乱码
解决办法有：
1、若客户端是gb2312编码，则在服务器指定输出流编码
2、服务器端和客户端都使用utf-8编码

gb2312:header('Content-Type:text/html;charset=GB2312');

utf8:header('Content-Type:text/html;charset=utf-8');

注意:如果你已经按上面的方法做了，还是返回乱码的话,检查你的方式是否为get,对于get请求（或凡涉及到url传递参数的），被传递的参数都要先经encodeURIComponent方法处理.如果没有用encodeURIComponent处理的话,也会产生乱码.

不用框架使用ajax 纯js使用ajax post，get范例及其区别的更多相关文章

  1. 此一生 一个纯js的ajax

    /** * 得到ajax对象 */ function getajaxHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp ...

  2. ajax 原生js封装ajax [转]

    /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @ ...

  3. 不用写软件，纯JS 实现QQ空间自动点赞

    这里分享一个自己写的点赞JS,已实现了好友动态.右侧栏猜你喜欢 点赞,有兴趣的朋友可以加上去玩玩.打开浏览器的开发者模式运行就可以看到效果了 var count = 0; var total = 0; ...

  4. 纯 js 让浏览器不缓存 ajax 请求

    开发「bufpay.com 个人即时到账收款平台」支付页面需要用到 ajax 轮询订单的支付状态. 现在浏览器对 ajax 的缓存策略遵循 http response header 里面的缓存设置,为 ...

  5. jQuery+AJAX实现纯js分页功能

    使用jQuery的AJAX技术,在bootstrap的框架下搭建的纯js分页 bootstrap作为Twitter推的一款前端框架,效果个人还是觉得很不错的.这次只是拿来作为网页元素的css样式表使用 ...

  6. 纯js实现瀑布流布局及ajax动态新增数据

    本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...

  7. Ajax，纯Js+Jquery

    AJAX:Asynchronous Javascript and xml 异步,Js和Xml 交互式网页开发 不刷新页面,与服务器交互 详情请参照Jquery工具指南用在浏览器端的技术,无刷新,通过X ...

  8. AJAX（JS&&JQ&&H5）

    一 AJAX的简介: AJAX是"Asynchronous Javascript And XML"(异步JavaScript和XML),通过后台与服务器实现少量的数据交换,可以使页 ...

  9. JS原生Ajax&Jquery的Ajax技术&Json

    1.介绍Ajax Ajax = 异步 JavaScript 和 XML Ajax是一种创建快速动态网页的技术 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以不用整个 ...

随机推荐

  1. linux正则表达式基础部分

    1.什么是正则表达式? 简单的说,正则表达式就是为处理大量的字符串而定义的一套规则和方法, 例如:假设“@”代表boy,“!”代表girl.echo“@!” === “boygirl” 通过定义的这些 ...

  2. 整合mybatis和spring时 Error creating bean with name 'sqlSessionFactory' defined in class path resource

    今天在整合mybatis和spring的时候出的错 报错如下 Exception in thread "main" org.springframework.beans.factor ...

  3. 【PHP】详解 $_SERVER 函数中QUERY_STRING和REQUEST_URI、SCRIPT_NAME、PHP_SELF区别

    实例:1.http://localhost/index.php/Home/Home/index.html $_SERVER['QUERY_STRING'] = ""; $_SERV ...

  4. 【bug】【yii】配置log时，报错 Setting read-only property: yii\web\Application::log

    Setting read-only property: yii\web\Application::log 配置放在了 components 外面,应该放在里面

  5. ob缓存的基本使用

    在页面 加载的时候 如果 图片 很多 很大 会造成页面的阻塞降低用户体验 我们在点击页面的时候可以使用OB缓存 整个页面, 当用户点击的时候直接请求的是我们预先准备好的html页面 .也降低了我们数据 ...

  6. Java中的接口和抽象类（转）

    在面向对象的概念中,我们知道所有的对象都是通过类来描述的,但是并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类往往用来表征我们在对问题 ...

  7. django实现事务

    1.导入模块 from django.db import transaction 2.使用方法 with transaction.atomic(): User.objects.create(name= ...

  8. May I see you again?【我可以再见到你吗？】

    May I see you again "May I see you again?" he asked. There was an endearing nervousness in ...

  9. Tame Me【驯服我】

    Tame Me “Good morning,” said the fox. 早上好,狐狸说 “Good morming,” the little prince responded politely,a ...

  10. A1031 Hello World for U (20)（20 分）

    A1031 Hello World for U (20)(20 分) Given any string of N (>=5) characters, you are asked to form ...