jQuery中的Ajax应用

1,Ajax概念:是一种广泛应用在浏览器的网页开发技术,是JavaScript、XML、XMLHttpRequest等技术的综合应用。

2,Ajax的优点:a、不需要任何浏览器插件,在任何支持Javascrtipt的浏览器上运行

       b,优秀的用户体验

       c,提高Web程序的性能

       d,减轻服务器和宽带的负担

3,Ajax缺点:a,它可能破坏浏览器后退按钮的正常行为

      b,搜索引擎的支持不足

      c,开发和调试工具的缺乏

      d,手机设备支持性差

4,XMLHttpRequest对象是Ajax的核心对象,Ajax利用它来发送异步请求、接受响应及执行回调

5,属性:a、readyState:HTTP请求的状态,常用表示HTTP响应已经完全接受的值

   b、responseText:服务器响应体(不包括头部)

     c、responseXML:服务器响应XML文件到客服端

   d、status:HTTP状态代码,200表示成功,404表示没有找到资源,500表示服务器错误

6,方法:a,abort():取消当前响应

    b,open(method,url,async):method(请求的HTTP方法),url(请求的的路径),Async(是否异步)

    c、send():发送HTTP请求,使用传递给open()方法的参数

    d、setRequestHeader(name,value):添加一个HTTP请求的头部

7,

 document.getElementById("Button1").onclick = function () {
            //(1)创建httprequest请求对象
            var http = new XMLHttpRequest();
            //(2)打开链接
            http.open("get", "http://localhost:2498/Handler1.ashx");
            //(3)监控状态的返回
            http.onreadystatechange = function () {
                if (http.status == 200 && http.readyState == 4) {
                    alert(http.responseText);
                }
            }
            //(4)发送请求帮助
            http.send();
        }

8 ,

 $(function () {
            $("#Button1").click(function () {
                $.ajax({ 
                    url: "http://localhost:1622/Handler1.ashx",
                    type: "get",
                    data:{"name":"张柳英","age":"20","sex":""},
                    dataType: "text",
                    success: function (date) {
                        alert(date);
                    }
                })
            });
        });

9,

 $(function () {
            $("#BtnSubmit").click(function () {
                $.get("Handler1.ashx", {
                    username: $("#txtUsername").val(),
                    contact: $("#txtContact").val(),
                    message: $("#txtmessage").val()
                },
                function (date, textStatus) {
                //data成功后服务器端返回的数据,格式是xml,json,html等
                    $("#divContent").append(date);
                    //textStatus参数(可省)为请求状态:success,errornotmodified,timeout等四种状态
                    alert("留言成功");
                }
                )
            })
        });




context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            string username = context.Request.QueryString["username"];
            string contact = context.Request.QueryString["contact"];
            string message = context.Request.QueryString["message"];
            System.Text.StringBuilder sb = new System.Text.StringBuilder();
            sb.Append("<div><ul>");
            sb.Append("<li>留言人:" + username + "</li>");
            sb.Append("<li>留言:" + message + "</li>");
            sb.Append("</ul><hr/></div>");
            context.Response.Write(sb.ToString());

10,区别:$.get()是使用get方式,而$.post()方式是使用post方式,其要使用get方式,需将参数跟在url后进行传递

11,type为返回内容格式,xml,html,script,json,text,_default

12,回调函数方法的三个参数:responseText(服务器响应内容),textStatus(请求状态),XMLHttpRequest对象

原文地址:https://www.cnblogs.com/dclcc/p/3485102.html