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属性去请求外部的数据

看网络地址关键单词 cb和callback

       1.自己提供的接口

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

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

  2.别人提供的接口:

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

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

  3.dom创建的方式;

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

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

  document.body.appendChild(script)

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

  Ajax传入的数据的话,只能是字符串或数字,字段,其他形式的传参都不可以;

  Ajax只是跟后台交互也有同源策略的限制;

  不是当前服务器叫跨域;

  Ajax也有同源策略的限制想做跨域处理,只能通过script标签中的src属性才可以;

  access同源策略的报错;

原文地址:https://www.cnblogs.com/liancai001/p/10527871.html