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：响应后果的类型

感激

菜鸟教程

黑马程序员

万能的网络

以及勤奋的本人