zoukankan      html  css  js  c++  java
  • Ajax

    最近写博比较频繁,主要是为了将自己平时零散的知识点总结一下,让自己的知识能成一下体系。

    今天把高程的Ajax部分看完了,简单梳理一下,如有理解不到位的地方,也请各位网友指点一下,抱拳!

    先上大段代码

     1 //处理IE7之前版本的兼容并创建XHR对象;
     2 function createXHR(){
     3     if(typeof XMLHttpRequest != "undefined"){
     4         //如果存在XMLHttpRequest则直接使用该对象
     5         return new XMLHttpRequest();
     6     }else if(typeof ActiveXObject != "undefined"){
     7         //以下均为处理IE兼容问题
     8         if(typeof arguments.callee.activeXString != "string"){
     9             var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
    10             var len=null;
    11             for (var i=0; len=versions.length; i < len; i++) {
    12                 try{
    13                     new ActiveXObject(versions[i]);
    14                     arguments.callee.activeXString=versions[i];
    15                     break;
    16                 }catch(ex){
    17                     //do something
    18                 };
    19             };
    20         };
    21         return new ActiveXObject(arguments.callee.activeXString);
    22     }else{
    23         //如果没有XHR对象可用的话,也需要处理一下
    24         throw new Error("No XHR Object Available");
    25     }
    26 };
    27 
    28 var xhr=createXHR();//创建变量xhr
    29 
    30 //在调用open之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性
    31 xhr.onreadystatechange=function(){
    32     //监控xhr的状态:readyState的值有5个,每次值改变都会触发一次readystatechange
    33     //readyState==0 ---→未初始化,尚未调用open方法
    34     //readyState==1 ---→启动,调用open尚未调用send
    35     //readyState==2 ---→发送,调用send尚未接收到相应
    36     //readyState==3 ---→接收,收到部分响应数据
    37     //readyState==4 ---→完成,接收到全部响应数据且可以在客户端使用了
    38     if(xhr.readyState==4){
    39         if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
    40             //200为响应成功的标志,304表示资源没有被修改
    41             alert(xhr.responseText);
    42         }else{
    43             alert("Request was unsuccessful:"+xhr.status);
    44         };
    45     };
    46 };
    47 xhr.open("get","example.txt",true);
    48 xhr.send(null);
    49 //xhr.abort();//在接收到响应之前调用该方法可以取消异步请求

    以上是最简单的一个Ajax请求的过程,大概的流程如下:

    1.先定义一个XMLHttpRequest对象,这里的难点就是需要考虑IE兼容;

    2.启动一个请求以备发送open():该方法接收三个参数(实际可以接收5个,不过处于安全考虑,不建议使用):要发送的请求类型(“get”,“post”),请求的URL和表示是否异步的布尔值;这里还涉及到跨域问题,后面会提到;

    3.发动特定请求send(null):接收一个参数,即要作为请求主体发送的数据。如果不需要的话,也需要写一个null作为参数。

    4.检查响应状态,根据不同的状态,做出不同的处理,这部分代码一般写在open方法之前,主要是为了处理跨浏览器兼容问题。

    jQuery里已经将Ajax封装好了,调用很方便。

     1 $.ajax({
     2 
     3      type: 'POST',
     4 
     5      url: url ,
     6 
     7     data: data ,
     8 
     9     success: success ,
    10 
    11     dataType: dataType
    12 
    13 });

    以上写的很简单,其实Ajax还是很复杂的,w3c上介绍的很详细,一点点慢慢看。其实前端发展了这么多年了,基本大神们已经把各种东西都总结出来了,资料也很多。

    http://www.w3school.com.cn/jquery/ajax_ajax.asp


    补充GET和POST的区别


    讲到Ajax就不得不提GET和POST,二者的区别也是常被提起的,在网上也看了很多相关的文章,现把大家总结好的且是大多数人接受的一个区别列出来:

    1. get是从服务器上获取数据,post是向服务器传送数据。(这个基本上是没有异议的)

    2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
      (这个其实是大家默认的一种约定)

    3. 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。

    4. get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。
      (这里说的get传送数据量小其实并不是指get本身,二是说URL有一个长度限制,这个根据浏览器不同而不同,但是其实很多现代浏览器也并没有真的限制URL的长度,只是URL的长度会影响服务器响应的效率。所以这个应该不算是get和POST的区别。)

    5. get安全性非常低,post安全性较高。但是执行效率却比Post方法好。
      (现在在日常使用中,其实很多人也会把get的数据进行一个encode处理,这样很多人也很难一眼就从URL中读取到实际数据了,如果说可以进行encode解析,那么这个人应该也有能力截取POST发送包吧...)

    以上关于get和POST的区别黑体字部分是一般大家默认的,也是面试过程中面试官希望大家回答的,记住就好了;红色字体部分,可能是更深层次的东西吧,因为我没做过服务器端的工作,对这些,暂时还不敢较真,不过,先列出来,有技术大神可以指点一二,日后自己有机会更多的接触该部分,也会回来自己做一个校正。

  • 相关阅读:
    音频重采样48kk转16k
    ld: symbol(s) not found for architecture x86_64问题解决
    麦克风啸叫抑制解决方案之移频法
    gcc makefile 模板
    mysql 分组加序号
    java微信公众号JSAPI支付以及所遇到的坑
    appium新手入门(1)—— appium介绍
    一次完整的JVM堆外内存泄漏故障排查记录
    mysql 批量更改表名
    爬虫技术
  • 原文地址:https://www.cnblogs.com/oyangyin/p/4817871.html
Copyright © 2011-2022 走看看