您的位置:首页 > 其它

AJAX-简单示例

2017-08-02 20:25 127 查看
一个简单的AJAX示例



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script>
function getXMLHttpRequest() {
try {
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
return new ActiveXObject("Msxml2.XMLHTTP");
}
} catch(e) {
return new XMLHttpRequest();
}

}

function responseAjax(){
if(myRequest.readyState ==4){
if(myRequest.status == 200){
alert("The server said:"+myRequest.responseText);
}else{
alert("error:"+myRequest.statusText);
}
}
}

var myRequest = getXMLHttpRequest();
function callAjax(){
var lastname = 'Numb';
var url="http://123.206.17.200/hello.php";
myRequest.open('GET',url)
myRequest.onreadystatechange = responseAjax;
myRequest.send()
}
</script>
</head>
<body>
<button id="btn" onclick="callAjax()">按钮</button>
</body>
</html>


页面很简单,只有一个button,添加了一个onclick事件,有三个函数,分别是

getXMLHttpRequest():针对不同浏览器,获取XMLHttpRequest实例

responseAjax():回调函数,当浏览器请求完成后执行,返回服务器返回的数据,responseText

callAjax():发送服务器请求,open()和send()方法

假设服务器用如下的一个简单PHP文件:

<?php echo "Hello Ajax caller";?>


如果XMLHttpRequest成功调用了这个文件,responseText属性就会发哦韩字符串”Hello Ajax caller”,如下图

注意:要访问的必须是同域下文件,同源策略规定,浏览器的ajax只能访问跟它的HTML页面同源(相同域名或IP)的资源。

什么事跨域访问:在A网站中,我们希望使用Ajax来获得B网站中的特定内容。如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据,否则就是不安全的。

跨域访问可用CORS,以后更新

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: