欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Jquery基础11_Ajax简介

程序员文章站 2024-01-25 16:05:17
...

1.什么是Ajax?

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

2、为什么要使用Ajax?

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

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

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

3.工作原理:

Jquery基础11_Ajax简介
所谓的“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('登录失败')

        })
    })