AJAX介绍和使用

AJAX介绍和使用

博客说明

文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!

菜鸟教程地址

https://www.runoob.com/ajax/ajax-tutorial.html

简介

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。

异步和同步

客户端和服务器端相互通信的基础上

  • 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
  • 客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。

实现方式

使用js
//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

//2. 建立连接
/*
    参数:
        1. 请求方式:GET、POST
            * get方式,请求参数在URL后边拼接。send方法为空参
            * post方式,请求参数在send方法中定义
        2. 请求的URL:
        3. 同步或异步请求:true(异步)或 false(同步)

 */
xmlhttp.open("GET","ajaxServlet?username=tom",true);

//3.发送请求
xmlhttp.send();

//4.接受并处理来自服务器的响应结果
//获取方式 :xmlhttp.responseText
//什么时候获取?当服务器响应成功后再获取

//当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange。
xmlhttp.onreadystatechange=function()
{
    //判断readyState就绪状态是否为4,判断status响应状态码是否为200
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
       //获取服务器的响应结果
        var responseText = xmlhttp.responseText;
        alert(responseText);
    }
}
使用jquery

$.ajax实现

$.ajax({
    url:"ajaxServlet1111" , // 请求路径
    type:"POST" , //请求方式
    //data: "username=jack&age=23",//请求参数
    data:{"username":"jack","age":23},
    success:function (data) {
        alert(data);
    },//响应成功后的回调函数
    error:function () {
        alert("出错啦...")
    },//表示如果请求响应出现错误,会执行的回调函数

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

$.get 发送get请求

  • 语法:$.get(url, [data], [callback], [type])

  • 参数:

    url:请求路径

    data:请求参数

    callback:回调函数

    type:响应结果的类型

$.post() 发送post请求

  • 语法:$.post(url, [data], [callback], [type])

  • 参数:

    url:请求路径

    data:请求参数

    callback:回调函数

    type:响应结果的类型

感谢

菜鸟教程

黑马程序员

万能的网络

以及勤劳的自己

hmoban主题是根据ripro二开的主题,极致后台体验,无插件,集成会员系统
自学咖网 » AJAX介绍和使用