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

AjaxWeb数据交互方式有什么作用？怎么用？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(){                 $.get("http://t.weather.sojson.com/api/weather/city/101010100",function(dat,status){            console.log(dat);            console.log(status);            alert(dat);        }).error(function(){            alert("网络异常");        });                 $.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方法来完成。

985大学 211大学 全国院校对比 专升本