html+ajax跨越链接,ajax跨域 · WEB前端(html+css+js) · 看云

# :-: 3、同步和异步

第三个参数：是否异步

```

同步的时候，事件绑定函数必须再open的上面

异步的时候，事件绑定函数在哪都可以，所以都放在open的上面

xhr.open('post','gou.php',false);

ajax去请求数据的时候js这一段的代码是否要执行还是要等着ajax的结果

同步：必须等着ajax的结果，才能接着向下执行

异步：(使用的居多，而且效率要比同步的效率高)

```

```

//创建对象;

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

succ(xhr.responseText);

}

}

};

xhr.open('post','1.php',true);

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

xhr.send('demo=hah&test=hehe');

function succ(data) {

//console.log(data);

var obj = JSON.parse(data);

console.log(obj);

console.log(obj.name,obj.age);

}

console.log(100);

//get请求;

/*

xhr.open('get','1.php?username=goudan&pwd=123456');

xhr.send();*/

```

# :-: 4、跨域

```

4、跨域

跨域就是跨域名(ajax默认是不能跨域请求的)

127.0.0.1 localhost

那么如何可以解决跨域的请求的问题呢？

两种方法：

(1) header头设置

header('Access-Control-Allow-Origin：*');

(2) 使用JSONP (JSON with padding)

后端需要返回函数调用字符串，函数的参数就是json格式的字符串，在前端定义这个函数。然后通过将其引入进来，然后就会直接指定定义好的那个函数

```

前端脚本代码

```

点击实现跨域

function fn(data) {

console.log(data);

}

window.onload = function () {

var oBtn = document.getElementById('btn');

oBtn.onclick = function () {

var oScript = document.createElement('script');

oScript.src = "http://192.168.0.105/js/1/2.php";

document.body.appendChild(oScript);

}

}

```

后端接口代码

```

// header('Access-Control-Allow-Origin：*');

$arr = ['name'=>'xiaohua', 'age'=> 19];

// echo json_encode($arr);

echo 'fn(\''. json_encode($arr).'\')';

?>

```