Ajax学习

简介:

以前,当我们点击了一个按钮,向服务器请求数据的时候,通常会有这么一个流程。浏览器向服务器发送Http请求→服务器返回整个页面→浏览器将原先的整个页面替换成新的页面。这样子做当然没有什么问题,但是比如在看土豆的视频的时候,想看一下下方的评论,不过瘾,想再看下一页的评论,这时候浏览器会向服务器发请求,要是正在看视频的时候整个页面重新加载,视频重加载一次,那简直不可饶恕。所以就产生了Ajax这种技术,用来进行页面的局部刷新,省的每次更新界面都得重新下载一个完整的界面。Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种进行页面局部异步刷新的技术。用AJAX向服务器发送请求和获得服务器返回的数据并且更新到界面中,不是整个页面刷新,而是在HTML页面中使用JavaScript创建XMLHTTPRequest对象来向服务器发出请求以及获得返回的数据,就像JavaScript版的WebClient一样,在页面中由XMLHTTPRequest来发出Http请求和获得服务器的返回数据,这样页面就不会整个刷新了。

      下面我们将用一个小例子来体验一下Ajax的神奇。我们将会做一个向服务器获取时间的小页面,这个东西将通过XmlHTTPRequest向服务器发送请求。

浏览器端的Ajax请求代码

复制代码
<script type="text/javascript">
        function btnClick() {
             var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHTTP对象
            if (!xmlHttp) {                                        //判断xmlHttp对象是否创建成功
                alert("创建xmlHttp对象异常!");
                return false;
            }
            xmlHttp.open("POST", "GetDate.ashx?ts=" + encodeURI("哈哈"), false); //准备向服务器的GetDate发出post请求
            //XMLHTTP默认(也推荐)不是同步请求的,也就是open方法并不等服务器响应数据才返回,而是监听服务器
            //返回的数据,因此需要监听onreadystatechange事件。
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4) {
                    if (xmlHttp.status == 200) {//如果状态码为200则是成功
                        alert(xmlHttp.responseText);//responseText是服务器返回的文本
                        document.getElementById("Text1").value = xmlHttp.responseText;
                    }
                    else {
                        alert("Ajax服务器错误");
                    }
                }
            }
            xmlHttp.send();
        }
    
    </script>
复制代码

在这段代码中,我们做了一下几件事情:1、创建一个XmlHttpRequest对象用来处理Ajax请求。2、我们调用XmlHttpRequest.open()方法准备Ajax请求,传进去的参数主要是选择请求的方法和请求的URL。3、我们将XmlHttpRequest.onreadystatechange绑定上我们自己的处理函数,主要就是判断返回的消息是否正确,如果正确,那么从返回的消息中提取我们需要的信息并绑定到指定的控件上。4、向服务器发起请求。

其实这个过程有点像数据库的查询(执行)过程。数据库的查询要经历这么几个步骤,首先建立数据库的连接,通常是通过指定的数据库连接字符串进行数据库的匹配,再次就是进行查询操作,最后操作完成后对查询的结果进行处理。

服务器端代码

我们在Vs2010中创建一个WebApplication,并创建一个GetDate.Ashx来处理客户端的请求。

复制代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace testAjax
{
    /// <summary>
    /// GetDate 的摘要说明
    /// </summary>
    public class GetDate : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            string time = context.Request["ts"];
            context.Response.ContentType = "text/plain";
            context.Response.Write(DateTime.Now.ToString() + time);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
复制代码

这个一般处理程序其实就做一件事情,就是将服务器上面的时间发送给客户端。

补充说明:

1、前面我们定义了Ajax的同步请求,如果我们发送异步请求,那么在请求过程中javascript代码会继续执行,这时可以通过readyState属性判断请求的状态(即上文xmlHttp.readyState==4处的代码),当readyState = 4时,表示收到全部响应数据,属性值的定义如下:

readyState

描述

0

未初始化;尚未调用open()方法

1

启动;尚未调用send()方法

2

已发送;但尚未收到响应

3

接收;已经收到部分响应数据

4

完成;收到全部响应数据

2、在Ajax的状态发生改变的时候,我们除了需要判断请求的状态,还需要判断服务器返回的信息中的HTTP状态码,以便判断服务器是否正确地返回我们需要的数据。

 

 ----示例代码

参考链接

Ajax与JSON的一些总结

XMLHttpRequest

本文转自陈哈哈博客园博客,原文链接http://www.cnblogs.com/kissazi2/p/3294341.html如需转载请自行联系原作者


kissazi2

相关文章
|
2月前
|
JSON 前端开发 JavaScript
Ajax 学习总结
这是一个关于Ajax学习的总结,包括导入Ajax包、异步请求和表单验证。示例展示了如何使用jQuery进行Ajax请求,从后台获取并显示数据,同时提到了Json乱码问题的解决方法和表单数据的前后端交互。还给出了表单验证的简单示例,通过Ajax实时校验用户名。
30 2
|
12月前
|
前端开发 JavaScript
AJAX-day03-AJAX进阶
AJAX-day03-AJAX进阶
AJAX-day03-AJAX进阶
|
11月前
|
XML JSON 前端开发
什么是Ajax,Ajax的原理是什么?
AJAX全称(Async Javascript and XML),即异步的JavaScript 和XML,是一种创建交互式网页应用的网页开发技术。
85 0
|
12月前
|
前端开发 JavaScript API
AJAX-day01-AJAX入门
AJAX-day01-AJAX入门
|
12月前
|
JSON 前端开发 数据安全/隐私保护
AJAX-day02-AJAX原理
AJAX-day02-AJAX原理
|
数据采集 XML 前端开发
【Ajax入门技术】了解Ajax
【Ajax入门技术】了解Ajax
105 0
【Ajax入门技术】了解Ajax
|
前端开发
Ajax学习
本文主要讲Ajax学习
|
JavaScript 前端开发 UED
学习Ajax
一、Ajax优缺点 优点:①页面局部刷新数据,用户体验感好;②所有浏览器都支持,不需下载额外插件;③使用异步方式与服务器通信;④减轻了服务器压力,加快了响应速度,体现ajax是按需获取数据的。
|
XML JavaScript 前端开发
ajax学习小结
ajax学习小结 一、Ajax Asynchronous JavaScript And XML = 异步的 JavaScript 及 XML。 目的:使得整个页面不刷新也能出现效果。
970 0
|
Web App开发 前端开发 JavaScript
Ajax的简单学习
ajax的核心是 XMLHttpRequest html引用外部的时候这些要放在最后 好处如下: 1.加快网页加载速度 2.
883 0