8、AJAX异步请求技术

1、AJAX简介：

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术、无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2、html中的JFrame标签实现简单（伪）ajax请求：

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>html演示ajax请求</title>

    <script>
        function goto() {
            let value1 = document.getElementById("input").value;
            document.getElementById("a1").src = value1;
        }
    </script>
</head>
<body>

<div>
    <input id="input" type="text">
    <input type="submit" value="搜索" onclick="goto()">
</div>

<div>
    <iframe src="https://www.cnblogs.com/zhangzhixi" id="a1" width="800px" height="600px"></iframe>
</div>
</body>
</html>

说明：

　　1、用户在输入框输入网址

　　2、点击搜索触发onclick事件

　　3、JS获取输入框的内容（value属性），赋值给 jframe的src属性

利用ajax可以做：

注册时，输入用户名自动检测用户是否已经存在。
登陆时，提示用户名密码错误
删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。
…等等

3、原生的ajax请求

<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<script>
function loadXMLDoc()
{
//1、创建ajax对象
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

//2、监听状态的变化
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }

//3、打开连接
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);//true代表支持异步执行，false为否

//4、发送请求
    xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" οnclick="loadXMLDoc()">修改内容</button>

</body>
</html>

4、JQuery操作ajax

Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
jQuery提供多个与AJAX有关的方法。
通过jQuery AJAX方法，您能够使用HTTP Get和HTTP Post从远程服务器上请求文本、
HTML、XML或JSON-同时您能够把这些外部数据直接载入网页的被选元素中。
jQuery不是生产者,而是大自然搬运工。.
jQuery Ajax本质就是XMLHttpRequest,对他进行了封装，方便调用!

jQuery.ajax(...)
       部分参数：
              url：请求地址
             type：请求方式，GET、POST（1.9.0之后用method）
          headers：请求头
             data：要发送的数据
      contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
            async：是否异步
          timeout：设置请求超时时间（毫秒）
       beforeSend：发送请求前执行的函数(全局)
         complete：完成之后执行的回调函数(全局)
          success：成功之后执行的回调函数(全局)
            error：失败之后执行的回调函数(全局)
          accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
         dataType：将服务器端返回的数据转换成指定类型
            "xml": 将服务器端返回的内容转换成xml格式
           "text": 将服务器端返回的内容转换成普通文本格式
           "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
         "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
           "json": 将服务器端返回的内容转换成相应的JavaScript对象
          "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数