当前位置:首页 > 资讯 > info5 > 正文

[JS]笔记19_AJAX跨域(demo)

发表于: 2016-11-07   作者:express_yourself   来源:转载   浏览:
摘要: 注:服务器环境运行!test05.php文件:1、同步请求xhr.open(‘get’,’test05.php?_=’+newDate().getTime(),false)//同步请求–>同步执行 同步请求 请求数据 varlist=document.getElementById('list');varbtn=document.getElementById('btn');btn.onc

注:服务器环境运行!

test05.php文件:

<?php $str='{"name":"薯片","sex":"女","age":19,"score":66}'; echo $str; ?>

1、同步请求

xhr.open(‘get’,’test05.php?_=’+new Date().getTime(),false)
//同步请求–>同步执行

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同步请求</title>
</head>
<body>
<button id="btn">请求数据</button>
<h1 id="list"></h1>
<script> var list=document.getElementById('list'); var btn=document.getElementById('btn'); btn.onclick=function(){ //1、创建XMLHttpRequest对象 if (window.XMLHttpRequest) {//非IE5 6 var xhr=new XMLHttpRequest();//实例对象 }else{//IE5 6 var xhr=new ActiveXObject('Microsoft.XMLHTTP'); } //2、打开与服务器的链接 xhr.open('get','test05.php?_='+new Date().getTime(),false)//同步请求-->同步执行 //3、发送给服务器 xhr.send(null);//空或null--get请求 //4、响应就绪---异步请求 /*xhr.onreadystatechange=function(){ if (xhr.readyState==4) {//请求完成 if (xhr.status==200) {//OK-->表示响应已就绪 list.innerHTML=xhr.responseText; console.log('完成数据请求!'); }else{ alert(xhr.status); }; }; };*/ //4、响应就绪---同步请求 var json=JSON.parse(xhr.responseText); console.log(json); // {name: "薯片", sex: "女", age: 19, score: 66} list.innerHTML=json.name; console.log('完成数据请求!'); //其他程序 console.log('其他程序'); } </script>
</body>
</html>

打印结果:

Object {name: "薯片", sex: "女", age: 19, score: 66}
同步请求.html:40 完成数据请求!
同步请求.html:43 其他程序

同步请求,ajax请求的代码会和页面的其他代码,按先后顺序执行。

2、post请求

xhr.open(‘post‘,’test05.php?‘,true);
//post 请求–添加http头部
xhr.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
//3、发送给服务器
xhr.send(‘user=laowang_=’+new Date().getTime());//post请求

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>post请求</title>
</head>
<body>
<button id="btn">请求数据</button>
<h1 id="list"></h1>
<script> var list=document.getElementById('list'); var btn=document.getElementById('btn'); btn.onclick=function(){ //1、创建XMLHttpRequest对象 if (window.XMLHttpRequest) {//非IE5 6 var xhr=new XMLHttpRequest();//实例对象 }else{//IE5 6 var xhr=new ActiveXObject('Microsoft.XMLHTTP'); } //2、打开与服务器的链接 xhr.open('post','test05.php?',true)//常用异步--true-->最后执行 //post 请求--添加http头部 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //3、发送给服务器 xhr.send('user=laowang_='+new Date().getTime());//post请求 //4、响应就绪---异步请求 xhr.onreadystatechange=function(){ if (xhr.readyState==4) {//请求完成 if (xhr.status==200) {//OK-->表示响应已就绪 var json=JSON.parse(xhr.responseText); list.innerHTML=json.name; console.log('完成数据请求!'); }else{ alert(xhr.status); }; }; }; //其他程序 console.log('其他程序'); } </script>
</body>
</html>

打印结果:

其他程序
post请求.html:32 完成数据请求!

异步请求所有的请求过程会等到页面其他代码执行完后,最后执行。

3、ajax函数封装

ajax.js:

function ajax(Url,successFn,failureFn){
    //1、创建XMLHttpRequest对象
    if (window.XMLHttpRequest) {//非IE5 6
        var xhr=new XMLHttpRequest();//实例对象
    }else{//IE5 6
        var xhr=new ActiveXObject('Microsoft.XMLHTTP');
    }
    //2、打开与服务器的链接
    xhr.open('get',Url,true)//常用异步--true-->最后执行
    //3、发送给服务器
    xhr.send(null);//空或null--get请求
    //4、响应就绪---异步请求
    xhr.onreadystatechange=function(){
        if (xhr.readyState==4) {
            if (xhr.status==200) {
                successFn(xhr.responseText);//请求成功
            }else{
                if (failureFn) {
                    failureFn();//请求失败
                }else{
                    alert(xhr.status);
                }
            };
        };
    };
}

ajax函数封装应用:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封装</title>
</head>
<body>
<button id="btn">请求数据</button>
<h1 id="list"></h1>
<script src="ajax.js"></script>
<script> var list=document.getElementById('list'); var btn=document.getElementById('btn'); btn.onclick=function(){ ajax('test05.php?_='+new Date().getTime(),function(str){ var json=JSON.parse(str); // {name: "薯片", sex: "女", age: 19, score: 66} list.innerHTML=json.name+json.sex+json.age; },function(){ alert('连接失败!') }) //其他程序 console.log('其他程序'); } </script>
</body>
</html>

4、ajax函数应用 -百度关键字

baidu2.php:

<?php header("Access-Control-Allow-Origin:*"); // $url='http://suggestion.baidu.com/su?wd=';//由服务器来获取数据 $url=$_GET['sc'];//页面传过来数据地址,由服务器去获取 function getJSONStr($str){ return substr($str,17); } function crul($key){ global $url; $data = file_get_contents($url.$key); $data = getJSONStr($data); $data = str_replace("{q:\"","",$data); $data = str_replace("\",p:","{%aaa%}",$data); $data = str_replace(",s:[","{%aaa%}",$data); $data = str_replace("]});","",$data); $arr = explode("{%aaa%}",$data); $res = array(); $res['q'] = iconv("GB2312","UTF-8",$arr[0]); if ($arr[1] == 'true'){ $arr[1] = true; }else{ $arr[1] = false; } $res['p'] = $arr[1]; if (strlen($arr[2])>0){ $arr[2] = substr($arr[2],1,-1); $arr[2] = str_replace("\",\"",",",$arr[2]); $arr[2] = iconv("GB2312","UTF-8",$arr[2]); } $res['s'] = explode(',',$arr[2]); echo json_encode($res);//json_encode()转换成json字符串 } $key = $_REQUEST['wd']; crul($key); ?>

baidu2-keyword-ajax.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>baidu</title>
<style> *{margin:0;padding:0;list-style: none;} #box{width:500px;margin:30px auto 0;padding:10px;background: #e3e3e3;} #ipt{width:496px;line-height: 30px;font-size: 18px;color:blue;} #list{margin-top:10px;background: #e3e3e3;} #list li{line-height: 26px;font-size: 16px;color: blue;padding: 0 10px;} #list li:hover{background: #ccc;} </style>
</head>
<body>
<div id="box">
    <input id="ipt" type="text">
    <ul id="list">
        <!-- <li>123fd</li> <li>213213</li> -->
    </ul>
</div>
<script src="ajax.js"></script>
<script> var ipt=document.getElementById('ipt'); var list=document.getElementById('list'); ipt.onkeyup=function(){ list.innerHTML=''; ajax('baidu2.php?wd='+ipt.value+'&sc=http://suggestion.baidu.com/su?wd=&t='+new Date().getTime(),function(str){ var json=JSON.parse(str); /*["12306铁路客户服务中心", "12306火车票网上订票官网", "12306退票手续费", "12306.cn", "12306身份信息待核验要多久", "12306验证码识别",…]*/ for (var i = 0; i < json.s.length; i++) { list.innerHTML+='<li>'+json.s[i]+'</li>'; } }) } </script>
</body>
</html>

运行结果:
[JS]笔记19_AJAX跨域(demo)_第1张图片

5、ajax函数应用 -login-ajax

login.php:

<?php
/*****************************************************

    请求方式: get

    url:    form.php?user=用户名&pass=密码

    return: '登陆成功'
            '账号密码不能为空'
            '账号错误'
            '密码错误'

*****************************************************/
$user=$_GET["user"];
$pass=$_GET["pass"];

// $user=$_POST["user"];
// $pass=$_POST["pass"];

if ($user=="lolo"&&$pass=="2303"){
    echo '登陆成功';
}else{
    if ($user==""||$pass=="") {
        echo '账号密码不能为空';
    } else if ($user!="laowang"){
        echo '账号错误';
    }else if ($pass!="12345"){
        echo '密码错误';
    };
};

?>

login-ajax.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login-ajax</title>
<style> #wrap{ width:200px; margin:20px auto; } </style>
</head>
<body>
<form id="wrap">
    <input id="user" type="text">
    <input id="pass" type="text">
    <button id="btn">登录</button>
</form>
<script src="ajax.js"></script>
<script> var user=document.getElementById('user'); var pass=document.getElementById('pass'); var btn=document.getElementById('btn'); btn.onclick=function(){ ajax('login.php?user='+user.value+'&pass='+pass.value+'&t='+new Date().getTime(),function(str){ alert(str); }); } </script>
</body>
</html>

6、用form请求-login-form

login-from.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login-form</title>
<style> #wrap{width:200px;margin:20px auto;} </style>
</head>
<body>
<form id="wrap" method="get" action='login.php'>
    <input id="user" type="text">
    <input id="pass" type="text">
    <button id="btn">登录</button>
</form>
</body>
</html>

把请求的路径放在form的属性action里面;请求方法放在method里面

7、通过接口文档声明的ajax请求

#wrap{width:600px;margin:20px auto;background: #eee;list-style: none;}
</style>
</head>
<body>
    <div id="wrap">
        <button id="btn">获取汽车信息</button>
        <ul id="con">
        </ul>
    </div>
<script src="ajax.js"></script>
<script> var btn=document.getElementById('btn'); var con=document.getElementById('con'); btn.onclick=function(){ ajax('http://sjz.bokanedu.com/tgr/api/index.aspx?day=4-2&type=car&_='+new Date().getTime(),function (str){ var json=eval('('+str+')')//解析成json对象 console.log(json); if (json.code==0) { for (var i = 0; i < json.data.batchs.length; i++) { con.innerHTML+='<li>汽车编号:'+json.data.batchs[i].code+';汽车名称:'+json.data.batchs[i].name+'</li>'; } }else{ console.log(json.msg); } }) /*{"code":"0",data:{ id: 100001, bin:"JIT-3JS-2",targetBin:"JIT-3JS-3K",batchs:[{code:"JTL-Z38001",name:"奥迪三轮毂"},{ code:"JTL-Z38002",name:"奥迪四轮驱动"}]}}*/ } </script>
</body>
</html>

[JS]笔记19_AJAX跨域(demo)

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
一、问题描述 在页面渲染时需要动态获取iframe子页面的高度,然后重新设置iframe高度,达到自适应的
本文主要来源于博客园中其他博客:http://www.cnblogs.com/rainman/archive/2011/02/21/1960044.htm
常用关于 JavaScript 中的跨域访问方法 JS中的跨域是受到限制的,但是跨域有时候又是必须的,藉此,
JS中的跨域是受到限制的,但是跨域有时候又是必须的,藉此,各种高手牛人想尽办法使得JS能够跨域获
同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个
1.什么是跨域 我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题. 跨
个人对跨域的一些理解,如有不对,请多多指教。 一.ajax设置Access-Control-Allow-Origin实现跨域访
在开发中总是会遇到,接入层可能去调用其它域名下服务的api,crud数据,可是在这中间会出现js的同源
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,
原文:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html 什么是跨域 JavaScript出于
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号