原创 Ajax Web数据交互方式有什么作用？怎么用？

Ajax Web数据交互方式有什么作用？怎么用？Ajax 技术发送http请求获取后台服务器数据，Ajax的简写方式可以使用$.get和$.post方法来完成。AJAX 是开发者利器：不刷新页面更新网页；在页面加载后从服务器请求数据；在页面加载后从服务器接收数据；在后台向服务器发送数据。

学习目标：能够知道Ajax的作用

1. Ajax是什么？

Ajax 是Asynchronous JavaScript and XML的简写，Ajax一个前后台配合的技术，它可以让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，Ajax 最大的优点是实现局部刷新，Ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住，当前端页面想和后台服务器进行数据交互就可以使用Ajax了。

这里提示一下大家, 在html页面使用Ajax需要在web服务器环境下运行, 一般向自己的web服务器发送Ajax请求。

2. Ajax的使用方法介绍

jquery将它封装成了一个方法$.Ajax()，我们可以直接用这个方法来执行Ajax请求。

示例代码:

<script>
    $.ajax({
    // 1.url 请求地址
    url:'http://t.weather.sojson.com/api/weather/city/101010100',
    // 2.type 请求方式，默认是'GET'，常用的还有'POST'
    type:'GET',
    // 3.dataType 设置返回的数据格式，常用的是'json'格式
    dataType:'JSON',
    // 4.data 设置发送给服务器的数据, 没有参数不需要设置
​
    // 5.success 设置请求成功后的回调函数
    success:function (response) {
        console.log(response);    
    },
    // 6.error 设置请求失败后的回调函数
    error:function () {
        alert("请求失败,请稍后再试!");
    },
    // 7.async 设置是否异步，默认值是'true'，表示异步，一般不用写
    async:true
});
</script>

Ajax方法的参数说明:

1.url 请求地址

2.type 请求方式，默认是'GET'，常用的还有'POST'

3.dataType 设置返回的数据格式，常用的是'json'格式

4.data 设置发送给服务器的数据，没有参数不需要设置

5.success 设置请求成功后的回调函数

6.error 设置请求失败后的回调函数

7.async 设置是否异步，默认值是'true'，表示异步，一般不用写

8.同步和异步说明

同步是一个Ajax请求完成另外一个才可以请求，需要等待上一个Ajax请求完成，好比线程同步。

异步是多个Ajax同时请求，不需要等待其它Ajax请求完成， 好比线程异步。

Ajax的简写方式:

$.Ajax按照请求方式可以简写成$.get或者$.post方式

Ajax简写方式的示例代码:

 <script>
    $(function(){
        /*
         1. url 请求地址
         2. data 设置发送给服务器的数据, 没有参数不需要设置
         3. success 设置请求成功后的回调函数
         4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式
        */ 
        $.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
            console.log(dat);
            console.log(status);
            alert(dat);
        }).error(function(){
            alert("网络异常");
        });

        /*
         1. url 请求地址
         2. data 设置发送给服务器的数据, 没有参数不需要设置
         3. success 设置请求成功后的回调函数
         4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式
        */ 
        $.post("test.php", {"func": "getNameAndTime"}, function(data){
            alert(data.name); 
            console.log(data.time); 
        }, "json").error(function(){
            alert("网络异常");
        }); 
    });


</script>

$.get和$.post方法的参数说明:

$.get(url,data,success(data, status, xhr),dataType).error(func)

$.post(url,data,success(data, status, xhr),dataType).error(func)

1.url 请求地址

2.data 设置发送给服务器的数据，没有参数不需要设置

3.success 设置请求成功后的回调函数

data 请求的结果数据

status 请求的状态信息, 比如: "success"

xhr 底层发送http请求XMLHttpRequest对象

4.dataType 设置返回的数据格式

"xml"

"html"

"text"

"json"

5.error 表示错误异常处理

func 错误异常回调函数

3. 小结

Ajax是发送http请求获取后台服务器数据的技术；Ajax的简写方式可以使用$.get和$.post方法来完成。