Ajax

前端复习 同时被 2 个专栏收录
8 篇文章 0 订阅
5 篇文章 0 订阅

原生ajax请求

注:ActiveXObject(“microsoft.XMLHttp”) 判断是否为IE

function ajax(url){
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
        xhr.open("get",url,true);
        xhr.send();
        xhr.onreadysattechange = () =>{
            if(xhr.readystate == 4){
                if(xhr.status == 200){
                    var data = xhr.responseText;
                    return data;
                }
            }
        }    
    }

原生GET请求

//创建核心对象
		xmlhttp = null;
		if (window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
		} else if (window.ActiveXObject) { 
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//编写回调函数
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				alert(xmlhttp.responseText)
			}
		}
		//open设置请求方式和请求路径
		xmlhttp.open("get", "/Ajax/ajax2?username=张三");//一个servlet,后面还可以写是否同步
		//send 发送
		xmlhttp.send();

原生POST请求

//创建核心对象
		xmlhttp = null;
		if (window.XMLHttpRequest) {// code for Firefox, Opera, IE7, etc.
			xmlhttp = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//编写回调函数
		xmlhttp.onreadystatechange = function() {
			
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				alert(xmlhttp.responseText)
			}
		
		}
		//open设置请求方式和请求路径
		xmlhttp.open("post", "/Ajax/ajax2");//一个servlet,后面还可以写是否同步
		//设置请求头
		xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded")
		//send 发送
		xmlhttp.send("username=张三");

Jquery版Ajax

$.ajax()

// get请求
$.ajax({
//请求方式
    type:'GET',
    //发送请求的地址以及传输的数据
    url:'fzz.php?number'+=xxx,
    //服务器返回的数据类型
    dataType:'json',
    success:function(data){
        //请求成功函数内容
    },
    error:function(jqXHR){
        //请求失败函数内容
    }
});
// post请求
$.ajax({
    //请求方式
    type:'POST',
    //发送请求的地址
    url:'fzz.php',
    //服务器返回的数据类型
    dataType:'json',
    //发送到服务器的数据,对象必须为key/value的格式,jquery会自动转换为字符串格式
    data:{name:xxx,age:xxx},
    success:function(data){
        //请求成功函数内容
    },
    error:function(jqXHR){
        //请求失败函数内容
    }
});

$.get()

$.get('fzz.php',{
    //发送至服务器的数据,格式为key/value
    number:xxx  
},function(data){
    //请求成功时的callback
},'json');//json为返回内容的格式

$.post()

$.post('fzz.php',{
    //发送至服务器的数据,格式为key/value
    number:xxx  
},function(data){
    //请求成功时的callback
},'json');//json为返回内容的格式

load()方法

能载入远程HTML代码并插入DOM中

//data为发送的key/value数据,可选
//callback为请求完成的回调,可选无论请求成功或失败都会调用
$(‘xxx’).load(‘fzz.html’,data,callback);

serialize()方法

serialize()作用于一个jQuery对象,能够将DOM元素内容序列化为字符串,用于Ajax请求.

$(’#form1’).serialize();

Ajax跨域

实现跨域

  • jsonp解决跨域
  • CORS跨域资源共享
  • document.domain

jsonp解决跨域

原理:动态创建一个script标签。利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。
步骤

  • 去创建一个script标签
  • script的src属性设置接口地址
  • 接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。
  • 通过定义函数名去接收后台返回数据
//去创建一个script标签 
var script = document.createElement("script"); 
//script的src属性设置接口地址 并带一个callback回调函数名称 
script.src="http://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面 
document.head.appendChild(script); 
//通过定义函数名去接收后台返回数据 
function jsonpCallback(data){ 
//注意 jsonp返回的数据是json对象可以直接使用 
//ajax 取得数据是json字符串需要转换成json对象才可以使用。
 }

CORS跨域资源共享

原理:服务器设置Access-Control-Allow-OriginHTTP响应头之后,浏览器将会允许跨域请求
限制:浏览器需要支持HTML5,可以支持POST,PUT等方法兼容ie9以上
需要后台设置

Access-Control-Allow-Origin: * //允许所有域名访问,或者
Access-Control-Allow-Origin: http://a.com //只允许所有域名访问

document.domain

原理:相同主域名不同子域名下的页面,可以设置document.domain让它们同域
限制:同域document提供的是页面间的互操作,需要载入iframe页面

// URL http://a.com/aaa
var ifr = document.createElement('iframe');
ifr.src = 'http://b.a.com/bbb'; 
ifr.onload = function(){
    var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
    ifrdoc.getElementsById("aaa").innerHTML);
};

ifr.style.display = 'none';
document.body.appendChild(ifr);
  • 1
    点赞
  • 1
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值