• Ajax的应用实例解析


    【Asp.Net】教你一步一步学习Ajax(一)使用GET方法

    关于Ajax概念方面的叙述就不写了,不清楚的园友可以去百度搜索下。(点此进入

    注意:Ajax不是一门编程语言,它是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。

    Ajxa可以为我们做什么呢?我们为什么需要用到Ajax呢?

    如今技术的飞跃发展,用户体验的越来越重要。面对干巴巴的一个、没有任何效果的页面,用户是不会过多的停留。只有那些很炫,用户体验好的页面,用户才会花些时间去浏览。

    然后如今浏览量就是一个网站的成功的标志。要想获取更多的用户,你就必须让页面符合用户的习惯和用户的需求。

    通过 AJAX,您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象,您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。 这样在用户的网络不稳定的情况下,只是部分刷新而不影响用户在该页面进行浏览或其他操作。

    关于XMLHttpRequest 的几个重要属性和方法:

    属性:

    readyState:0 - (未初始化)还没有调用send()方法; 1 - (载入)已调用send()方法,正在发送请求;2 - (载入完成)send()方法执行完成,已经接收到全部响应内容; 3 - (交互)正在解析响应内容; 4 - (完成)响应内容解析完成,可以在客户端调用了。

    onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。

    status:(1)200: "OK";(2)404: 未找到页面。

    方法:void open(string,string,boolean)、void send(string)、void setHeader(string,string)、string getResponseHeader(string)、

    string getAllResponseHeaders()、void abort()。

      使用Ajax有几个流程必须是要熟悉的:

    1.创建一个XMLHttpRequest对象来进行异步与服务器进行通信。在创建该对象时要注意根据浏览器的不同而创建不同的对象。基于IE浏览器内核的是:

    var  xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");或var  xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP"),此种方法有很多种版本。

    基于其他则有:var xmlHttpRequest = new XMLHttpRequest()。

    2.创建好对象后就需要使用open方法来进行交互的设置了, xmlHttpRequest.open("GET", url, true);其中“get”表示使用的是GET方法,传入的url为获取数据或者交互的地址;第三个参数,当该boolean值为true时,服务器请求是异步进行的,也就是脚本执行send()方法后不等待 服务器的执行结果,而是继续执行脚本代码; 当该boolean值为false时,服务器请求是同步进行的,也就是脚本执行send()方法后等待 服务器的执行结果的返回,若在等待过程中超时,则不再等待,继续执行后面的脚本代码!

    3.给onreadystatechange 指定一个调用的函数,赋值为函数名,如:xmlHttpRequest.onreadystatechange = getfromHandler;

    4.启用send方法进行交互。xmlHttpRequest.send(null);因为使用的是get方法,在此不需要利用send来传递参数值。

    5.实现在第三步中的getfromHandler()函数。因为是在通信结束后才进行的操作,所以先判断readyState值是否为4,Status是否为200,然后再进行需要对页面的操作。

     

     function getfromHandler() {
    if (xmlHttpRequest.readyState == 4) {
    if (xmlHttpRequest.Status == 200) {
    document.getElementById("Result").value = xmlHttpRequest.responseText;
    }
    }
    }


    上面是页面获取到后台传来的数据(xmlHttpRequest.responseText),下面介绍后台是如何发送数据的。

    使用一般处理程序来与进行数据的操作,在此处可以根据需要的数据进行处理后发回到主页面,简单的就是“Hello World”了。

    1  public void ProcessRequest(HttpContext context)
    2 {
    3 context.Response.ContentType = "text/plain";
    4 context.Response.Write("Hello World");
    5 }

    在发送大数据量的时候,我们就不能简单的发送一行字符了,我们需要使用构造XML格式来进行大数据量的传递,这样主页面使用起来也方便,在主界面获取信息的时候
    可以像XML操作那样直接获取各个节点的值。

    document.getElementById("text").value = xmlHttpRequest.responseXML.documentElement.firstChild.nodeValue;

    这样主页面和后台的交互就完成了,效果就是部分刷新来与后台通信,关键部分就是要熟悉使用XMLHttpRequest对象的流程:

    AJAX 应用

                 提交
    1.   XMLHttpRequest————>请求

            返回          分析
                 2.服务器————>数据<————3.JavaScript

    令附带上2个小示例,一个普通的“Hello World”,还有一个是与数据的交互,当然读者不能直接运行的了,因为你们没得我本地的数据库,只需修改便能正常运行了,留点考验给读者了,应该都能完成吧!

    本篇博文感觉写得不好,希望大家能多多指点,在此表示歉意。

    点此下载

    喜欢我的文章的话就关注我吧!大家的支持就是我的动力!

    转载请说明出处并联系作者,否则将追究法律责任。 博主QQ:1226051092 http://www.cnblogs.com/Zeech-Lee
  • 相关阅读:
    2014下半年软考总结
    Java学习之Filter
    java学习之PreparedStatement
    java学习之dom4j 对 xml的读取
    Windows查看端口占用及杀掉进程
    CentOS压力测试工具Tsung安装和图形报表生成Tsung安装配置
    Tsung压力测试:Openfire
    CentOS Mysql安装配置
    nodejs、webpack
    IOS操作系统上执行monkey测试
  • 原文地址:https://www.cnblogs.com/zhc088/p/2224132.html
Copyright © 2020-2023  润新知