【基础知识】_AJAX

发表于 | 分类于

AJAX

1. AJAX概念

ASynchronous JavaScript And XML：异步的JavaScript 和 XML

传统的网页（不使用 Ajax）如果需要从服务器获取数据来更新页面内容，或者是在页面显示途中想要与服务器进行数据传输，必须重载整个网页页面，甚至有可能破坏页面上一些之前进行的js操作。因为前端页面想要与服务器进行数据交换必须先跳转到动态资源，然后再跳回静态资源。

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

2. 实现方式

AJAX一般与JQeury配合使用，原生JS实现方式现在基本不用。

  • $.ajax({键值对})：使用该JQeury方法可以想指定动态资源发送异步请求，发送该请求的过程中，发送请求的该静态资源的其他无关区域不会变化。

    e.g.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    $.ajax({

        // 请求路径，即为动态资源虚拟路径去掉最前面的/
        url:"ajaxServlet1111" , 

        //请求方式
        type:"POST" , 

        //data: "username=jack&age=23",//请求参数
    	data:{"username":"jack","age":23},//请求参数的json格式写法

        //响应成功后的回调函数，注意此处的data代表的不是上面的请求信息，而是格式正确的响应信息参数。
        success:function (data) {
    		alert(data);
    	},
    	
        //表示如果请求响应出现错误，会执行的回调函数。
        error:function () {
    		alert("出错啦...")
    	},

        //设置接受到的响应数据的格式
        dataType:"text"
    });

  • $.get(url, [data], [callback], [type])：发送get请求

    • url：请求路径
  • data：请求参数
  • callback：回调函数
  • type：响应结果的类型

  • $.post(url, [data], [callback], [type])：发送post请求

    • url：请求路径
  • data：请求参数
  • callback：回调函数
  • type：响应结果的类型