首页 > 代码库 > ajax请求

ajax请求

2024-09-02 21:51:37   217人阅读

0121 { ajax-post-get-跨域的原理JSONP-php常用语法 }

1. ajax

1.1. ajax是什么

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

 

1.2. ajax的用法

1.2.1 get请求

//new一个xml对象
var xhr = new XMLHttpRequest() ;
//设置请求航，get请求方式，请求的文件为data.php
xhr.open( ‘get‘ , ‘data.php‘ ) ;
//get的请求主题为空
xhr.send( null ) ;

//监听XMLHttpRequest的状态改变，一旦改变就执行函数
xhr.onreadystatechange = function(){

    if( xhr.readyState == 4 && xhr.status == 200 ){
        var data = http://www.mamicode.com/xhr.responseText ;
        console.log(data);
    }
} ;

 

1.2.2 post请求

var xhr = new XMLHttpRequest() ;
xhr.open( ‘post‘ , ‘data.php‘ ) ;
//post请求一定要设置请求头
xhr.setRequestHeader( ‘Content-Type‘,‘application/x-www-form-urlencoded‘) ;
//请求主题，即往后台传送的数据
xhr.send( ‘name=tom&addr=USA‘ ) ;

xhr.onreadystatechange = function(){
    if( xhr.readyState == 4 && xhr.status == 200 ){
        var test = xhr.responseText ;
        console.log( JSON.parse(test) );
    }
} ;

 

 

1.2.3 字符串转对象JSON.parse()  

如果后台发送过来的数据是字符串类型的对象，需要用JSON.parse()将字符串转换为对象

var str = ‘{ "name":"jack" , "addr":"USA" }‘ ;
console.log( JSON.parse(str) );

 

注意点：对象里的引号不能省略并且一定要是双引号

 

 

 

 

 

1.3. 跨域

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。

不同源则是跨域

利用了script标签向其他网站请求文件不会被阻止的特性进行跨域

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json.parse</title>
</head>
<body>

<script>
    function suggest_so( data ){
        console.log(data);
    }
</script>

<script src="https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word,obdata&word=it技术"></script>

<script>
   suggest_so()
</script>

</body>
</html>

 

 

 

 

 

 

 

 

 

2. PHP常用语法

4.1 json_encode PHP数组转化为json格式字符串

如：将接收来的$_POST数组转化为json格式的字符串

$datas = json_encode( $_POST ) ;

 

4.2 file_get_contents加载外部文件

如，将外部json格式的文件加载进来放到$jn变量里

$jn = file_get_contents( "jsn.json" );

 

ajax请求


联系
我们