zoukankan      html  css  js  c++  java
  • AJax学习笔记

    Ajax:
      1.创建Ajax异步对象,在不同的浏览器有不同的方式!!必须做浏览器兼容代码
       //创建xhr对象 兼容方式
        function createXmlHttp() {
        var xhobj = false;
        try {
            xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+
        } catch (e) {
            try {
                xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6
            } catch (e2) {
                xhobj = false;
            }
        }
        if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari ,ie10
            xhobj = new XMLHttpRequest();
        }
        return xhobj;
        }


      2.如果使用get请求相同的url,那么浏览器会直接从缓存中读取页面结果,而不会去服务器拿数据。
    如果使用get请求,不想读取浏览器缓存的话要加上下面的代码:
    xhr.setRequestHeader("If-Modified-Since",0);


      3.Ajax是一种异步的js,他不是一种新的技术,而是将多种技术整合在一起的技术,是一种浏览器
    端的技术,主要目的是在于局部的和服务器交互而不用刷新整个页面


      4.XMLHttpRequest对象是Ajax的核心,可以异步的从服务器获取txt或者xml数据


      5.使用Ajax实现省市下拉框部分代码:


    兼容浏览器的Ajax写法Get版:
    function Ajax(url,onsuccess)
    {
      var aj = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject("Microsoft.XMLHTTP");
      aj.open("Get",url,true);   //Get请求通过url直接传递参数
      aj.onreadystatechange = function()
      {
        if(aj.readyState == 4 && aj.status == 200)
        {
          onsuccess(aj.responseText);
        }
      }
      aj.send();
    }


    兼容浏览器的Ajax写法Post版:
    function Ajax(url,onsuccess,参数)
    {
    var ajax = window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP");
    ajax.open("Post",url,true);
    ajax.setRequstHeader("Content-Type","application/x-www-form-urlencoded");
    ajax.onreadystatechange = function()
    {
    if(ajax.state == 4 && ajax.status == 200)
    {
    onsuccess(ajax.responseText);
    }
    }
    ajax.send(参数);    //Post方式在send中添加参数传送
    }


      7.ajax实现删除:在服务器的数据库中删除数据之后,前台页面对应的行的要被删除
    var a = document.getElementById("");
    var tr = a.perantNode.perantNode;//a的父节点是td,td的父节点是tr
    tr.perantNode.RemoveChild(tr);//tr的父节点是table,调用table的删除子节点的方法删除tr这个行


      8.在js中将中文编码使用encodeURI("中文");


      9.Ajax的readySate:
        0 未初始化,new完后
        1 已打开,创建完成并初始化,但还没有send
        2 已发送,已经调用send,正在等待状态码的返回
        3 正在接收,但是还不能用,响应消息还不完整
        4 已加载,所有数据加载完毕


      10.Ajax的常用方法:
        abort:取消请求
        open:初始化
        send:发送请求
        setHttpRequestHeader:添加自定义HTTP头到请求
        getAllResponseHeaders:获取整个HTTP响应头的列表
        getResponseHeader:仅获得指定的响应头


      11.Ajax异步对象不能请求非本网站的页面,如:百度的Ajax不能给谷歌的服务器发送请求,浏览器
    会报错,没有权限,这是一种安全机制


    解决方案:
      使用script标签。script标签可以跨网站发送请求,如:在百度的服务器上有<script src="http://www.google.com/GetData.ashx">,将请求google服务器的一个页面,该页面context.Response.Write("var myData = " + res);返回的js对象作为全局对象,即在百度服务器的页面都可以访问这个返回的对象(等于在百度页面上定义了一个全局的对象),这样就可以实现使用js进行跨域请求,JsonP技术,其实是js的一种使用方法,并不是一个新的技术


    以上是JsonP的第一种用法,获得另外一台服务器动态页面返回的js数据




    第二种方法,获得另外一台服务器动态页面返回的js数据,并且传方法名参数给服务器,由服务器返回的js代码调用这个方法(最流行的一种用法),例子:
    服务器端:string funcName = context.Request.QueryString["funcName"];
              context.Response.Write(funcName + "(" + res + ");");
    浏览器端:
              var sc = document.creatElement("script");
              sc.src = "http://另外一条服务器的域名?funcName=MyData";
              document.body.appendChild(sc);//这个script标签里面的内容是另外一台服务器发回来          的js代码
              //下面这个方法必须有,不然服务器发回来的方法不存在,
              function MyData(data)
              {
                alert(data);
              }
  • 相关阅读:
    php基础设计模式(注册树模式、工厂模式、单列模式)
    微信公众平台实现获取用户OpenID的方法
    如何成为一名优秀的工程师(语义篇)
    操作系统死锁原因及必要条件
    Word中怎样删除分节符而不影响前节页面设置
    当代码变更遇上精准测试的总结
    Windows网络命令
    linux shell编程
    Oracle远程登录命令
    数据库别名AS区别
  • 原文地址:https://www.cnblogs.com/jchubby/p/4429747.html
Copyright © 2011-2022 走看看