当前位置:首页 > .Net > Ajax 简单的异步处理

Ajax 简单的异步处理

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

一、基础认识

AJax技术的目的:实现页面无刷新数据动态更改

优点:

  + 不需要插件支持

  + 提供WEB程序的功能

  + 优秀的用户体验

  + 减轻服务器带宽的负担

缺点:

  + 破坏浏览器的前进与后退

  + 搜索引擎SEO的支持性不好

二、代码示例

学习后编写的一个很基础的Ajax函数,帮助自己更好的掌握Ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/*
 * method => Ajax请求所采用的方法,GET或POST 
 * URL => 所要请求页面的URL
 * paras=> 发送时附加的参数
 * callback => 完成请求或页面数据准备完毕时执行的方法 
*/
 
function Ajax(method,url,paras,callback){
 
    function getXMLHttpReq(){
        var XMLHttpReq = null;
        if(window.XMLHttpRequest){ 
            XMLHttpReq = new XMLHttpRequest();
        }else if(window.ActiveXObject){
            XMLHttpReq = new ActiveXObject('Microsoft.XMLHTTP');
        }
        return XMLHttpReq;
    }
    xhr = getXMLHttpReq();
 
    if(method ==='POST'){
        xhr.open('POST',url,true);  
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        if(paras!=''){
            xhr.send(paras);
        }else{
            xhr.send(null);
        }
    }else{
        if(paras!=''){
            url = encodeURI(url+'?'+paras);    
        }
        xhr.open('GET',url,true);
        xhr.send(null);
    }
 
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            callback();
        }
    }
}
 
//调用方法
    function Ajax1(){
        Ajax('GET','test.php','',function(){
            document.getElementById('responseText').innerHTML = xhr.responseText;
        })            
    }

· 代码说明:

1
2
3
4
5
6
7
8
9
10
11
12
13
ActiveXObject  //  利用ActiveX插件可以与微软的其它组件进行交换,包括这里我需要的微软自带的HTTP请求方法。
 
new ActiveXObjcet('Microsoft.XMLHTTP') // IE5/6支持的HTTP请求方法
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
//如果Ajax请求是通过POST方式,那么为了方便后台通过键值对的形式获取数据,可以指定数据的发送以表单的形式。
open('GET','index.php?a=1&b=2',true)  //GET方式,通过在URL附加参数进行数据的传输。
 
XMLHttpReq.send(pars)  //POST方式的数据发送
url = encodeURI(url+'?'+pars);     
//为了解决IE6/7在GET方式下传输中文参数出现乱码的情况,会在参数传输之前利用JS进行URL编码。
 
echo urldecode($_GET['a']) 
// 客户端进行编码,服务端进行解码

· 重点讲解:

readyState && status

   readyState表示HTTP请求的运行状态,不论请求的数据是否找到,都会经历以下的过程

  1. —- 请求未初始化
  2. —- 与服务器建立连接
  3. —- 请求已经接收
  4. —- 请求处理完成

   status 则表示了HTTP所请求数据的状态[常见的反馈码]:

    200 —- 数据请求完成,已经可以使用。

    404 —- 页面未找到。

  2. open()

    功能:初始化请求的参数。

    格式:open(‘请求数据的方式’,’所要请求的页面URL’,’是否异步’);

    格式说明:

         · 请求数据的方式:GET | POST

         · 是否异步:true(异步) | false(同步)

    * 如果存在setRequestHeader()方法,一定要把open()方法放在它之前的一行。
3. send()

    功能:发送请求。

    格式:send(paras)

    代码示例:

1
2
3
4
5
6
7
send(null)
 
 //在GET方式下用这种方式,因为参数会附加在URL后进行传输。
 
send('fname=神&lname=经病') 
 
 //在POST方式,用这种方式传输参数,但要记得使用setRequestHeader()方法

4. 同步与异步

    xmlHttpReq对象的open()方法第三个参数可以设置同步或异步的方式。

    true – 表示为异步,它不会等待服务器的执行完成。

    false – 表示同步,它会等待服务器执行完成,否则便会挂起程序,一直等待,一般不推荐是用同步的方式,不过对于一些小程序还是可以使用的。

5. setRequestHeader()

     该方法可以设置请求的头部信息,常用以post方式向一个动态网页文件提交数据时使用。这

    是因为PHP中的$_POST['key']方法,需要用到键值对的格式,因此必须声明请求的类型为: setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’) 以表单提交数据的方式来发送数据到服务器。

    

6. 使用时间戳或随机数来确保无缓存的请求数据

1
2
3
4
5
//时间戳
open('GET','index.php?t='+ new Date()*1,true)
 
//随机数
open('GET','index.php?m='+ Math.random(),true)

总结,在C#中异步还有很多用法,熟练的掌握Ajax,就能做出来多漂亮的页面。

  • << 模仿百度下拉框
  • 如何快速提高你的效率 >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/ajax-go/

    相关文章 近期热评 最新文章

    • 怎样在WordPress中安装Google Analytics
      就算你积累了多年网站建设的经验,你都不可能一开始就建一个外观,速度,功能以及转化都很完美的网站。你能做的并且也是各个站长正在做的,无非是通过不断的监测来改进...
    • 怎样在WordPress中安装Google Analytics
      就算你积累了多年网站建设的经验,你都不可能一开始就建一个外观,速度,功能以及转化都很完美的网站。你能做的并且也是各个站长正在做的,无非是通过不断的监测来改进...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程