码迷,mamicode.com
首页 > Web开发 > 详细

AJAX

时间:2019-05-12 15:30:53      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:传统   ror   开发   amp   get请求   XML   综合   org   type   

AJAX

一、概念

AJAX,中文名阿贾克斯。没错就是昨晚欧冠被热刺逆转的的荷甲黑马阿贾克斯,今年的欧冠决赛成为了英超内战,真的有意思。但愿另一个赛场的车仔和阿森纳可以在欧联决赛会师!

AJAX(Asynchronous JavaScript and XML),也就是异步的JavaScriptXML技术,指的是一套综合了多项技术的浏览器端网页开发技术。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

  1. 同步:客户端向服务端发送请求,在获得相应之前被阻塞不能做其他的操作
  2. 异步:客户端发送请求后,获得相应之前可以做其他的操作

二、AJAX实现方式

1. 原生JavaScript的实现方式

2. jQuery的实现方式

  1. $.ajax():发送异步请求

    $("input[type='button']").click(function () {
        $.ajax({
            // 使用$.ajax的方式发送异步请求
            url:"ajaxServlet", // 请求路径
    
            type:"POST",// 请求方式
    
            // data: "username=tom&age=23",// 请求参数
            data: {"username":"Jack", "age":18},
    
    
            success:function (data) {// 响应成功的回调函数
            alert(data); // data 是服务器 响应的值
            },
    
            error:function () {// 响应失败的回调函数
            alert("error");
            },
            dataType:"text"// 响应的数据格式
        });
    });
  2. $.get(url, [data], [callback], [type]):发送异步的GET请求,

    1. 参数:

      1. URL:请求路径
      2. data:请求参数
      3. callback:回调函数
      4. type:响应数据类型
      $("input[type='button']").click(function () {
           $.get("ajaxServlet", {username:"hehe"}, function (data) {
               alert(data);
           }), "text"
      });
  3. $.post():发送一步的POST请求,用法和上面的get一样,仅仅是方法名为post便可以发送POST请求

AJAX

标签:传统   ror   开发   amp   get请求   XML   综合   org   type   

原文地址:https://www.cnblogs.com/zhuobo/p/10852259.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!