专注Java教育14年 全国咨询/投诉热线:400-8080-105
动力节点LOGO图
始于2009,口口相传的Java黄埔军校
首页 hot资讯 AJAX基础教程:AJAX请求的五个步骤是什么

AJAX基础教程:AJAX请求的五个步骤是什么

更新时间:2020-08-20 12:08:55 来源:动力节点 浏览1587次

AJAX基础教程:AJAX请求的五个步骤是什么?

AJAX基础教程

首先,我们来回顾下ajax是什么?

Ajax = 异步 JavaScript 和XML。

Ajax是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 Ajax)如果需要更新内容,必需重载整个网页面

前面谈到ajax是什么,其主要也就是异步提交,大家是否知道同步和异步提交的区别吗?

同步提交:当用户发送请求时,当前页面不可以使用,服务器响应页面到客户端,响应完成,用户才可以使用页面。

异步提交:当用户发送请求时,当前页面还可以继续使用,当异步请求的数据响应给页面,页面把数据显示出来 。

ajax的工作塬理:

客户端发送请求,请求交给xhr,xhr把请求提交给服务,服务器进行业务处理,服务器响应数据交给xhr对象,xhr对象接收数据,由javascript把数据写到页面上,如下图所示:

1.jpg

//第一步,创建XMLHttpRequest对象
var xmlHttp = new XMLHttpRequest();
function CommentAll() {
//第二步,注册回调函数
xmlHttp.onreadystatechange =callback1;
//{
    //    if (xmlHttp.readyState == 4)
    //        if (xmlHttp.status == 200) {
    //            var responseText = xmlHttp.responseText;
    //        }
    //}
//第三步,配置请求信息,open(),get
     //get请求下参数加在url后,.ashx?methodName = GetAllComment&str1=str1&str2=str2
      xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?methodName=GetAllComment", true);
    //post请求下需要配置请求头信息
    //xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //第四步,发送请求,post请求下,要传递的参数放这
    xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//"
}
//第五步,创建回调函数
function callback1() {
    if (xmlHttp.readyState == 4)
        if (xmlHttp.status == 200) {
            //取得返回的数据
            var data = xmlHttp.responseText;
            //json字符串转为json格式
            data = eval(data);
            $.each(data,
                function(i, v) {
                    alert(v);
                });       
        }
}
//后台方法
 public  void GetAllComment(HttpContext context)
        {
            //Params可以取得get与post方式传递过来的值。
            string methodName = context.Request.Params["methodName"];
            //QueryString只能取得get方式传递过来的值。
            string str1 = context.Request.Form["str1"];
            //取得httpRequest传来的值,包括get与post方式
            string str2 = context.Request["str2"];
            List comments = new List();
            comments.Add(methodName);
            comments.Add(str1);
            comments.Add(str2);
            //ajax接受的是json类型,需要把返回的数据转给json格式
            string commentsJson = new JavaScriptSerializer().Serialize(comments);
            context.Response.Write(commentsJson);
        }

1. 建立xmlHttpRequest对象

2. 设置回调函数

3. 使用open方法与服务器建立链接

4. 向服务器发送数据

5. 在回调函数中针对不同的响应状态进行处理

以上就是AJAX基础教程中的AJAX请求的五个步骤内容,大家可要牢记哦。

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>