zoukankan      html  css  js  c++  java
  • ajax

    一、

    ajax:前后台数据交互依赖的一项技术。

    ajax是异步的javaScript和XML,它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

    1.XMLHttpRequest    ActiveXObject

    XMLHttpRequest 是 AJAX 的基础。

    XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象

    老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象

    variable=new XMLHttpRequest();

    variable=new ActiveXObject("Microsoft.XMLHTTP");

    2.ajax向服务器发送请求

    这里用到XMLHttpRequest对象的两个方法:

    open()     规定请求的类型、URL 以及是否异步处理请求。  

             open(method,url,async)

    send()    将请求发送到服务器。

             send(string)   这里的 string只用于post请求

    3.onreadystatechange事件

    当请求被发送到服务器时,我们需要执行一些基于响应的任务。

    每当 readyState 改变时,就会触发 onreadystatechange 事件。

    readyState 属性存有 XMLHttpRequest 的状态信息。

    下面是 XMLHttpRequest 对象的三个重要的属性:

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

    readyState     存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

          0: 请求未初始化

          1: 服务器连接已建立

          2: 请求已接收

          3: 请求处理中

          4: 请求已完成,且响应已就绪

    status           200:"OK"

            404:未找到页面

    4.responseText    服务器响应

    获得字符串形式的响应数据

    原生ajax

    function ajax(method,url,sync,fn){
     var xmlhttp=new XMLHttpRequest()
     xmlhttp.open(method,url,sync)
     xmlhttp.send()
     xmlhttp.onreadystatechange=function(){
      if(xmlhttp.readyState==4){
       if(xmlhttp.status==200){
        fn(xmlhttp.responseText)
       }
      }
     }
    }
    ajax(“get”,“data/aa.txt”,true,ff)
    function ff(data){
     var arr=JSON.parse(data)
     document.getElementById(“div”).innerHTML=arr[0].name;
    }

    二、JQuery ajax

    方法:

    $.ajax({

      async:true,

      data:{},

      url:"",

      dataType:jsonp,

      error:(xhr,tatus,error),

      jsonp:"call/callback",

      jsonpCallback:"fn",

      success:(result,status,xhr)

    })

    $.get("url",{给路径添加的内容},function(路径里的内容){})

    $.post("url",{给路径添加的内容},function(路径里的内容){})

    load:    $(selector).load(url,data,function(response,status,xhr))

    三、ajax中的跨域问题

    不在同一个服务器下就是协议域名端口三者有一个不一样就是跨域

       解决跨域

    靠标签身上的src属性解决跨域的问题,利用script标签的src属性去请求外部的数据

    看网络地址关键单词 cbcallback

           1.自己提供的接口

      写的顺序:先处理数据;(回调数据中的函数名)

      再通过script中的src属性,去链接到自己的接口;(自己写的数据只用一个函数名包着,便于回调)

      2.别人提供的接口:

      写的顺序:先处理数据  (回调数据中的函数名)

      再通过script中的src属性,去 链接到别人的接口;(并将cb后面别人的的函数名,改为自己要处理数据的函数名,便于回调)

      3.dom创建的方式;

      var script=document.createElement("script");

      script.src="网络地址"     (并将cb后面别人的的函数名,改为自己要处理数据的函数名,便于回调)

      document.body.appendChild(script)

      写函数处理数据   (cb后面的函数名)

  • 相关阅读:
    【BZOJ 3309】DZY Loves Math
    【51Nod 1239】欧拉函数之和
    【51Nod 1244】莫比乌斯函数之和
    莫比乌斯反演与杜教筛
    【BZOJ 3993】【SDOI 2015】星际战争
    【BZOJ 3876】【AHOI 2014】支线剧情
    【hihoCoder 1454】【hiho挑战赛25】【坑】Rikka with Tree II
    【BZOJ 1061】【Vijos 1825】【NOI 2008】志愿者招募
    【BZOJ 1016】【JSOI 2008】最小生成树计数
    【BZOJ 1005】【HNOI 2008】明明的烦恼
  • 原文地址:https://www.cnblogs.com/yangzhiqiang/p/10521990.html
Copyright © 2011-2022 走看看