zoukankan      html  css  js  c++  java
  • AJAX(三)详解原生POST请求

      post请求与get请求的代码差别很少。还是直接来个例子吧,下面的例子功能是,当id为“userName”的文本框失去焦点(onblur)时,使用AJAX发出post请求,验证用户名是否已经存在。

      一、服务端代码。 

    public class CheckNameHandler : IHttpHandler
    {
    
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            if (context.Request.HttpMethod.ToUpper() == "POST")
            {
                string uName = context.Request.Form["uName"];
                if (uName == "admin")
                {
                    context.Response.Write("true");
                }
                else
                {
                    context.Response.Write("false");
                }
            }
        }
    }

      没啥好解释的,服务端通过Form方式,获取post过来的数据,如果是“admin”就认为用户名已存在,否则就认为用户名不存在.

      二、客户端代码

    <!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 type="text/javascript">
            window.onload = function () {
                var ipt = document.getElementById("userName");
                ipt.onblur = function () {
                    ////1.声明异步对象
                    var xhr = false;
                    //2.根据浏览器类型,创建异步对象 
                    if (window.XMLHttpRequest) {
                        xhr = new XMLHttpRequest();
                    }
                    else {
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    //3.从文本框中获取用户名
                    var uName = this.value;
                    //4.打开异步对象,并设置参数
                    xhr.open("post", "CheckNameHandler.ashx", true);
                    //5.设置setRequestHeader,post请求必须设置
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    //6.设置回调函数
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            var result = xhr.responseText;
                            var span = document.getElementById("ckMsg");
                            if (result == "true") {
                                span.innerHTML = "用户名已存在";
                            }
                            else {
                                span.innerHTML = "用户名不存在";
                            }
                        }
                    }
                    //7.发送异步请求
                    xhr.send("uName=" + uName);
                }
            }
        </script>
    </head>
    <body>
        <input type="text" name="userName" id="userName" value="" /><span id="ckMsg"></span>
    </body>
    </html>

      代码也很简单,给文本框注册一个js事件onblur,当失去焦点时就通过AJAX发出post请求,验证文本框中输入的用户名是否已经存在。代码主体跟get方式几乎没有太大差别,需要说明的有以下几点:

      1.使用post请求方式,xhr.open()的第一个参数需要改为“post”。

      2.使用get请求时,可以不设置请求报文头;但是如果使用post请求方式,就必须设置。代码为:

      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      不管是请求报文头还是响应报文头,绝大部分的属性都是以键值对的形式来标注的。这个也不例外,这里的key和value都是死的,需要记一下。
      这里需要设置的key是“Content-Type”,没啥好说的,那个value太长了,不过不需要完全背下来,山人自有妙计。
      我们只需要打开vs,随便找一个能写HTML代码的文件,比如.html文件,比如.aspx文件,接下来在<body>标签中写一个<form>标签,然后给这个标签添加属性“enctype”,
      此时VS的智能提示就会为我们显示出如下图:



      没错,就是第一个选项,选中它,然后复制过来就搞定,简单!

       3.post传参方式与get不同,它需要在send函数中传递参数,参数的组织格式和get也是相同的,都是连接成字符串:“key1=val1&key2=val2.....”。

          只不过get传参是在url后边拼接,post传参是把参数放到send()方法内部。

      三、get与post差别 

      从表面上看,不管是什么请求方式,都不再依赖表单<form>了,包括post请求,所以从纯粹写代码的角度上来说,使用AJAX技术发出请求,get与post的差别已经模糊。
      但是,差别还是有的,最好不要乱来。
      1.get传参是通过url传参的,而url长度在某些浏览器中是受限的。而post传参理论上是不受限的,所以post适合大量数据传递。
      2.GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码等。在某种情况下,GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题。
      3.在客户端使用get请求时,服务器端使用Request.QueryString来获取参数,而客户端使用post请求时,服务器端使用Request.Form来获取参数。
      4.请老老实实遵循,如果做查询操作,就使用get请求;如果是增删改操作,就使用post请求。
  • 相关阅读:
    在提交订单时,为了让用户体验更好,一般改成正在提交,后面加三个点,为了让页面更生动,可以把点点改成动态
    js日期格式化
    h5嵌入视频遇到的bug及总结---转载
    字符串中删除多个特定的字符串
    在苹果手机上input有内阴影怎么去除
    把彩色图片置灰色图片
    springmvc入门程序
    Linux常用命令大全
    MyBatis逆向工程详细教程
    MyBatis整合Spring详细教程
  • 原文地址:https://www.cnblogs.com/ldq678/p/9205486.html
Copyright © 2011-2022 走看看