Jquery基础11_Ajax简介

1.什么是Ajax？

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2、为什么要使用Ajax?

这儿我们可以说到Ajax的优点之一：它可以在不刷新整个页面的情况下与服务器通信保持原有页面状态，说的简单易懂一点。举个例子：在我们浏览网页的时候会有两种情况

1.点击链接，页面白屏，等待跳转到另一个页面。

2.页面不刷新，局部出现新内容获得更好的用户体验。

3.工作原理：

所谓的“XHR”（浏览器内置对象”XMLHttpRequest ”），也就是Ajax功能实现所依赖的对象，AJAX就是通过浏览器的内置对象XHMHttpResquest来发送异步请求的，异步请求不会妨碍客户端的任何操作。

4. ajax技术

的目的是让javascript发送http请求，与后台通信，获取数据和信息。**ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。

• 同步和异步 现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。

• 局部刷新和无刷新 ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。

同源策略 ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑。特征报错提示：

5. $.ajax使用方法 常用参数：

1. url 请求地址
2. type 请求方式，默认是’GET’，常用的还有’POST’
3. dataType 设置返回的数据格式，常用的是’json’格式，也可以设置为’html’
4. data 设置发送给服务器的数据
5. success 设置请求成功后的回调函数
6. error 设置请求失败后的回调函数
7. async 设置是否异步，默认值是’true’，表示异步

以前的写法：

$.ajax({
    url: 'js/data.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
    success:function(data){
        alert(data.name);
    },
    error:function(){
        alert('服务器超时，请重试！');
    }
});

6. jsonp

jsonp ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，只需要将dataType:设置为jsonp,就可以跨域请求数据(前提是服务器允许跨域请求)

// 跨域请求
     $('#dl').click(function () {
        //获取账号密码
        var user = $('#username').val();
        var pwd = $('#password').val();
        $.ajax({
            url: 'http://test.lemonban.com/futureloan/mvc/api/member/login',
            dataType: 'jsonp',
            method: 'POST',
            data: {"mobilephone": user, "pwd": pwd},
        }).done(function (data) {
            console.log(data);
            alert('登录成功')
        }).fail(function () {
            alert('登录失败')

        })
    })