AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。AJAX编程步骤？1) 获得 XmlHttpRequest对象2) 使用 XmlHttpRequest向服务器发请求。                  a.发送get请求:                  /* open(请求方式,请求地址,同步/异步)  * 请求方式: get/post   * 请求地址：如果是get请求，请求参数添加到地址之后。                 * 比如  check_user.do?username=zs                 * 同步/异步:true 表示异步。*/xhr.open('get','check_user.do',true);                  b. 发送 post 请求:xhr.open('post','check_username.do',true); //#必须添加一个消息头content-type     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");3). 在服务器端，处理请求。4).在监听器当中，处理服务器返回的响应。xhr.onreadystatechange=function(){  //编写相应的处理代码  if(xhr.readyState == 4){    //只有 readyState 等亍 4,xhr 才完整地接收到了服务器返回的数据。    //获得文本数据    var txt = xhr.responseText;    //获得一个xml dom对象。    var xml = xhr.responseXML;    //dom操作、更新页面  }   };5.xhr.send(null)AJAX技术的优点?   1.页面无刷新   2.不打断用户的操作，用户的体验好   3.按需获取数据，浏览器和服务器之间数据的传输量减少   4.是一个标准技术，不需要下载任何的插件   5.可以利用客户端(浏览器)的计算能力

如何封装Ajax函数一个Ajax函数：1234567891011121314// 一个Ajax函数var xhr = null;if(window.XMLHttpRequest){   xhr = new XMLHttpRequest;}else{   xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.open("GET","https://jsonplaceholder.typicode.com/users");xhr.send(null);xhr.onreadystatechange = function(){   if(this.readyState === 4){        console.log(xhr.responseText)    }}封装自己的 Ajax 函数参数1：{string} 请求方法--method参数2：{string} 请求地址--url参数3：{object} 请求参数--params参数4：{function} 请求完成后，执行的回调函数--done123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960function ajax(method,url,params,done){//  统一将method方法中的字母转成大写，后面判断GET方法时 就简单点  method = method.toUpperCase();   //IE6的兼容  var xhr = window.XMLHttpRequest   ? new XMLHttpRequest()   : new ActiveXObject("Microsoft.XMLHTTP");   //创建打开一个连接 open                //将对象格式的参数转为urlencoded模式  //新建一个数组，使用for循环，将对象格式的参数，  //以（id = 1）的形式，每一个键值对用 & 符号连接 var pairs = []; for(var k in params){     pairs.push(k + "=" + params[k]);  }  var str = pairs.join("&");         //判断是否是get方法 ， get方法的话，需要更改url的值 if(method == "GET"){       url += "?" + str;  }              //创建打开一个连接 xhr.open(method,url); var data = null;if(method == "POST"){    //post方法 还需要设置请求头、请求体    xhr.setRequestHeader("Content-Type",    "application/x-www-form-urlencoded");    data = str;                  }xhr.send(data);  //执行回调函数xhr.onreadystatechange = function(){   if(this.readyState == 4) {       done(JSON.parse(this.responseText));   }return;   // 执行外部传进来的回调函数即可   // 需要用到响应体   }}   //调用函数//get方法//  ajax("GET","http://localhost:3000/users",//     {"id":1},//     function(data){//         console.log(data);//  }); //post方法     ajax("POST", "http://localhost:3000/users", { "name": "lucky","class":2,"age":20 }, function (data) {     console.log(data);});以上就是如何封装一个Ajax函数的详细内容转载自https://www.jb51.net/article/211475.htm

哈喽！大家好呀。如果无聊就和机器人聊聊天吧在初步进入Ajax学习 就忍不住给大家分享今天的劳动成果啦先来看看效果图：功能实现：• 点击发送按钮事件• 将用户输入的内容渲染到页面中• 点击回车键将表单的内容渲染到页面中• 获取机器人的内容 渲染到页面中• 播放机器人的内容先来看看项目的总体结构引入相关的文件：html框架比较简单12345678910111213141516171819202122232425262728<div class="wrap">   <!-- 头部 Header 区域 -->   <div class="header">     <h3>小思同学</h3>     <img src="img/person01.png" alt="icon" />   </div>   <!-- 中间 聊天内容区域 -->   <div class="main">     <ul class="talk_list" style="top: 0px;" id="talk_list">       <li class="left_word">         <img src="img/person01.png" /> <span>嗨，最近想我没有？</span>       </li>       <!-- <li class="right_word">           <img src="img/person02.png" /> <span>你好哦</span>         </li> -->     </ul>     <div class="drag_bar" style="display: none;">       <div class="drager ui-draggable ui-draggable-handle" style="display: none; height: 412.628px;"></div>     </div>   </div>   <!-- 底部 消息编辑区域 -->   <div class="footer">     <img src="img/person02.png" alt="icon" />     <input type="text" placeholder="说的什么吧..." class="input_txt" id="ipt" />     <input type="button" value="发 送" class="input_sub" id="btnSend" />   </div> </div><audio src="" id="voice" autoplay style="display: none;"></audio><audio src="" id="voice" autoplay style="display: none;"></audio>这里的音频播放标签，一定要添加autoplay属性，自动播放，不过不添加这个属性，播放机器人的功能就不能实现哟main.css123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168body {    font-family: 'Microsoft YaHei';}.wrap {    position: fixed;    width: 450px;    left: 50%;    margin-left: -225px;    top: 20px;    bottom: 20px;    border: 1px solid #ebebeb;    background-color: #fff;    border-radius: 10px;    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);    overflow: hidden;}.header {    height: 55px;    background: linear-gradient(90deg, rgba(246, 60, 47, 0.6), rgba(128, 58, 242, 0.6));    overflow: hidden;}.header h3 {    color: #faf3fc;    line-height: 55px;    font-weight: normal;    float: left;    letter-spacing: 2px;    margin-left: 25px;    font-size: 18px;    text-shadow: 0px 0px 5px #944846;}.header img {    float: right;    margin: 7px 25px 0 0;    border-radius: 20px;    box-shadow: 0 0 5px #f7f2fe;}.main {    position: absolute;    left: 0;    right: 0;    top: 55px;    bottom: 55px;    background-color: #f4f3f3;    box-sizing: border-box;    padding: 10px 0;    overflow:hidden;}.talk_list{    position: absolute;    width:100%;    left:0px;    top:0px;}.talk_list li {    overflow: hidden;    margin: 20px 0px 30px;}.talk_list .left_word img {    float: left;    margin-left: 20px;}.talk_list .left_word span {    float: left;    background-color: #fe9697;    padding: 10px 15px;    max-width: 290px;    border-radius: 12px;    font-size: 16px;    color: #fff;    margin-left: 13px;    position: relative;    line-height: 24px;}.talk_list .left_word span:before {    content: '';    position: absolute;    left: -8px;    top: 3px;    width: 13px;    height: 12px;    background: url('../img/corner01.png') no-repeat;}.talk_list .right_word img {    float: right;    margin-right: 20px;}.talk_list .right_word span {    float: right;    background-color: #fff;    padding: 10px 15px;    max-width: 290px;    border-radius: 12px;    font-size: 16px;    color: #000;    margin-right: 13px;    position: relative;    line-height: 24px;}.talk_list .right_word span:before {    content: '';    position: absolute;    right: -8px;    top: 3px;    width: 13px;    height: 12px;    background: url('../img/corner02.png') no-repeat;}.drag_bar{    position:absolute;    right:0px;    top:0px;    background-color: #fff;    height:100%;    width:6px;    box-sizing:border-box;    border-bottom:1px solid #f4f3f3;}.drager{    position:absolute;    left:0px;    top:0px;    background-color: #cdcdcd;    height:100px;    width:6px;    border-radius:3px;    cursor: pointer;}  .footer{    width:100%;    height: 55px;    left:0px;    bottom:0px;    background-color:#fff;    position: absolute;}  .footer img{    float: left;    margin:8px 0 0 20px;}  .input_txt{    float: left;    width:270px;    height:37px;    border:0px;    background-color: #f4f3f3;    margin:9px 0 0 20px;    border-radius:8px;    padding:0px;    outline:none;    text-indent:15px;}.input_sub{    float: left;    width:70px;    height:37px;    border:0px;    background-color: #fe9697;    margin:9px 0 0 15px;    border-radius:8px;    padding:0px;    outline:none;    color:#fff;    cursor: pointer;    }reset.css部分123456789101112131415161718192021222324252627282930313233343536body,ul,h1,h2,h3,h4,h5,h6{    margin: 0;    padding: 0;}h1,h2,h3,h4,h5,h6{    font-size:100%;    font-weight:normal;}a{    text-decoration:none;}ul{    list-style:none;}img{    border:0px;}  /* 清除浮动，解决margin-top塌陷 */.clearfix:before,.clearfix:after{    content:'';    display:table;    }.clearfix:after{    clear:both;}.clearfix{    zoom:1;}  .fl{    float:left;}.fr{    float:right;}接下来就是本项目的精华所在首先为发送按钮绑定点击事件，trim()方法是去除表单里面的空字符，开始为表单内容是否为空来一次判断。如果用户输入了内容，将表单里面的内容渲染到页面，我相信大家都非常的熟练了1234567891011121314// 为发送按钮绑定鼠标点击事件  $('#btnSend').on('click', function() {    var text = $('#ipt').val().trim()    if (text.length <= 0) {      return $('#ipt').val('') //用户输入的内容为空    }    // 如果用户输入了聊天内容，则将聊天内容追加到页面上显示    $('#talk_list').append('<li class="right_word"><img src="img/person02.png" /> <span>' + text + '</span></li>')    $('#ipt').val('')//文本为空    // 重置滚动条的位置    resetui()    // 发起请求，获取聊天内容    getMsg(text)  })接下来就是机器人的回复内容啦：用一个getMsg函数封装 传递放入参数就是用户输入的内容下一些Ajax的get获取内容，根据文档提供的地址http://www.liulongbin.top:3006/api/robot当 res.message === 'success' 表示获取聊天信息成功 就接受聊天信息，将信息追加到页面12345678910111213141516171819202122// 获取聊天机器人发送回来的消息function getMsg(text) {  $.ajax({    method: 'GET',    url: ' http://www.liulongbin.top:3006/api/robot',    data: {      spoken: text    },    success: function(res) {      // console.log(res)      if (res.message === 'success') {        // 接收聊天消息        var msg = res.data.info.text        $('#talk_list').append('<li class="left_word"><img src="img/person01.png" /> <span>' + msg + '</span></li>')        // 重置滚动条的位置        resetui()        // 调用 getVoice 函数，把文本转化为语音        getVoice(msg)      }    }  })}然后就是将文本转化为语音播放功能同样的封装一个函数getVoice() 传递的参数是接受到的机器人的聊天消息msg123456789101112131415161718// 把文字转化为语音进行播放  function getVoice(text) {    $.ajax({      method: 'GET',      url: ' http://www.liulongbin.top:3006/api/synthesize',      data: {        text: text      },      success: function(res) {        // console.log(res)        //下面的值可以通过console.log(res)输出查看里面的属性值        if (res.status === 200) {          // 播放语音 路径          $('#voice').attr('src', res.voiceUrl)        }      }    })  }最后一个功能就是用户按回车也可以发送消息12345678// 为文本框绑定 keyup 事件 $('#ipt').on('keyup', function(e) {   // console.log(e.keyCode)   if (e.keyCode === 13) {     // console.log('用户弹起了回车键')     $('#btnSend').click()   } })大家赶快去试试吧转载自https://www.jb51.net/article/227257.htm

一、定义1、什么是AjaxAjax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。2、同步与异步的区别同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。异步提交：当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显示出来 。3、ajax的工作原理客户端发送请求，请求交给xhr，xhr把请求提交给服务，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上，如下图所示：二、实现AJAX的基本步骤要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:• 创建XMLHttpRequest对象,即创建一个异步调用对象.• 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.• 设置响应HTTP请求状态变化的函数.• 发送HTTP请求.• 获取异步调用返回的数据.• 使用JavaScript和DOM实现局部刷新.1、创建XMLHttpRequest对象不同浏览器使用的异步调用对象有所不同，在IE浏览器中异步调用使用的是XMLHTTP组件中的XMLHttpRequest对象，而在Netscape、Firefox浏览器中则直接使用XMLHttpRequest组件。因此，在不同浏览器中创建XMLHttpRequest对象的方式都有所不同.在IE浏览器中创建XMLHttpRequest对象的方式为:1var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");在Netscape浏览器中创建XMLHttpRequest对象的方式为:1var xmlHttpRequest = new XMLHttpRequest();由于无法确定用户使用的是什么浏览器,所以在创建XMLHttpRequest对象时,最好将以上两种方法都加上.如以下代码所示:12345678910var xmlHttpRequest;  //定义一个变量,用于存放XMLHttpRequest对象createXMLHttpRequst();   //调用创建对象的方法//创建XMLHttpRequest对象的方法 function createXMLHttpRequest(){                                                     if(window.ActiveXObject) {//判断是否是IE浏览器        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");//创建IE的XMLHttpRequest对象    }else if(window.XMLHttpRequest){//判断是否是Netscape等其他支持XMLHttpRequest组件的浏览器        xmlHttpRequest = new XMLHttpRequest();//创建其他浏览器上的XMLHttpRequest对象    }}       "if(window.ActiveXObject)"用来判断是否使用IE浏览器.其中ActiveXOject并不是Windows对象的标准属性,而是IE浏览器中专有的属性,可以用于判断浏览器是否支持ActiveX控件.通常只有IE浏览器或以IE浏览器为核心的浏览器才能支持Active控件.      "else if(window.XMLHttpRequest)"是为了防止一些浏览器既不支持ActiveX控件,也不支持XMLHttpRequest组件而进行的判断.其中XMLHttpRequest也不是window对象的标准属性,但可以用来判断浏览器是否支持XMLHttpRequest组件.      如果浏览器既不支持ActiveX控件,也不支持XMLHttpRequest组件,那么就不会对xmlHttpRequest变量赋值.2、创建HTTP请求       创建了XMLHttpRequest对象之后，必须为XMLHttpRequest对象创建HTTP请求，用于说明XMLHttpRequest对象要从哪里获取数据。通常可以是网站中的数据,也可以是本地中其他文件中的数据。       创建HTTP请求可以使用XMLHttpRequest对象的open()方法,其语法代码如下所示:1XMLHttpRequest.open(method,URL,flag,name,password);代码中的参数解释如下所示:• method：该参数用于指定HTTP的请求方法，一共有get、post、head、put、delete五种方法，常用的方法为get和post。• URL：该参数用于指定HTTP请求的URL地址，可以是绝对URL，也可以是相对URL。• flag：该参数为可选，参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步、false表示同步，默认为true。• name：该参数为可选参数，用于输入用户名。如果服务器需要验证，则必须使用该参数。• password：该参数为可选，用于输入密码。若服务器需要验证，则必须使用该参数。通常可以使用以下代码来访问一个网站文件的内容。      1xmlHttpRequest.open("get","http://www.aspxfans.com/BookSupport/JavaScript/ajax.htm",true);或者使用以下代码来访问一个本地文件内容：1xmlHttpRequest.open("get","ajax.htm",true);注意：如果HTML文件放在Web服务器上，在Netscape浏览器中的JavaScript安全机制不允许与本机之外的主机进行通信。也就是说，使用open()方法只能打开与HTML文件在同一个服务器上的文件。而在IE浏览器中则无此限制（虽然可以打开其他服务器上的文件，但也会有警告提示）。3、设置响应HTTP请求状态变化的函数       创建完HTTP请求之后，应该就可以将HTTP请求发送给Web服务器了。然而，发送HTTP请求的目的是为了接收从服务器中返回的数据。从创建XMLHttpRequest对象开始，到发送数据、接收数据、XMLHttpRequest对象一共会经历以下5中状态。1. 未初始化状态。在创建完XMLHttpRequest对象时，该对象处于未初始化状态，此时XMLHttpRequest对象的readyState属性值为0。2. 初始化状态。在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时，该对象处于初始化状态。此时XMLHttpRequest对象的readyState属性值为1。3. 发送数据状态。在初始化XMLHttpRequest对象后，使用send()方法发送数据时，该对象处于发送数据状态，此时XMLHttpRequest对象的readyState属性值为2。4. 接收数据状态。Web服务器接收完数据并进行处理完毕之后，向客户端传送返回的结果。此时，XMLHttpRequest对象处于接收数据状态，XMLHttpRequest对象的readyState属性值为3。5. 完成状态。XMLHttpRequest对象接收数据完毕后，进入完成状态，此时XMLHttpRequest对象的readyState属性值为4。此时接收完毕后的数据存入在客户端计算机的内存中，可以使用responseText属性或responseXml属性来获取数据。        只有在XMLHttpRequest对象完成了以上5个步骤之后，才可以获取从服务器端返回的数据。因此，如果要获得从服务器端返回的数据，就必须要先判断XMLHttpRequest对象的状态。       XMLHttpRequest对象可以响应readystatechange事件，该事件在XMLHttpRequest对象状态改变时（也就是readyState属性值改变时）激发。因此，可以通过该事件调用一个函数，并在该函数中判断XMLHttpRequest对象的readyState属性值。如果readyState属性值为4则使用responseText属性或responseXml属性来获取数据。具体代码如下所示：12345678910//设置当XMLHttpRequest对象状态改变时调用的函数，注意函数名后面不要添加小括号xmlHttpRequest.onreadystatechange = getData;  //定义函数function getData(){    //判断XMLHttpRequest对象的readyState属性值是否为4，如果为4表示异步调用完成    if(xmlHttpRequest.readyState == 4) {        //设置获取数据的语句    }}4、设置获取服务器返回数据的语句       如果XMLHttpRequest对象的readyState属性值等于4，表示异步调用过程完毕，就可以通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据。       但是，异步调用过程完毕，并不代表异步调用成功了，如果要判断异步调用是否成功，还要判断XMLHttpRequest对象的status属性值，只有该属性值为200，才表示异步调用成功，因此，要获取服务器返回数据的语句，还必须要先判断XMLHttpRequest对象的status属性值是否等于200，如以下代码所示：1234if(xmlHttpRequst.status == 200) {   document.write(xmlHttpRequest.responseText);//将返回结果以字符串形式输出   //document.write(xmlHttpRequest.responseXML);//或者将返回结果以XML形式输出}注意：如果HTML文件不是在Web服务器上运行，而是在本地运行，则xmlHttpRequest.status的返回值为0。因此，如果该文件在本地运行，则应该加上xmlHttpRequest.status == 0的判断。        通常将以上代码放在响应HTTP请求状态变化的函数体内，如以下代码所示：       12345678910111213//设置当XMLHttpRequest对象状态改变时调用的函数，注意函数名后面不要添加小括号xmlHttpRequest.onreadystatechange = getData;  //定义函数function getData(){    //判断XMLHttpRequest对象的readyState属性值是否为4，如果为4表示异步调用完成    if(xmlHttpRequest.readyState==4){        if(xmlHttpRequest.status == 200 || xmlHttpRequest.status == 0){//设置获取数据的语句            document.write(xmlHttpRequest.responseText);//将返回结果以字符串形式输出            //docunment.write(xmlHttpRequest.responseXML);//或者将返回结果以XML形式输出        }    }}5、发送HTTP请求       在经过以上几个步骤的设置之后，就可以将HTTP请求发送到Web服务器上去了。发送HTTP请求可以使用XMLHttpRequest对象的send()方法，其语法代码如下所示：1XMLHttpRequest.send(data);       其中data是个可选参数，如果请求的数据不需要参数，即可以使用null来替代。data参数的格式与在URL中传递参数的格式类似，以下代码为一个send()方法中的data参数的示例：1name=myName&value=myValue       只有在使用send()方法之后，XMLHttpRequest对象的readyState属性值才会开始改变，也才会激发readystatechange事件，并调用函数。6、局部更新       在通过Ajax的异步调用获得服务器端数据之后，可以使用JavaScript或DOM来将网页中的数据进行局部更新。三、完整的AJAX实例123456789101112131415161718192021222324252627282930313233<html><head><title>AJAX实例</title><script language="javascript" type="text/javascript">       function ajaxHttpRequestFunc(){        let xmlHttpRequest;  // 创建XMLHttpRequest对象，即一个用于保存异步调用对象的变量        if(window.ActiveXObject){ // IE浏览器的创建方式            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");        }else if(window.XMLHttpRequest){ // Netscape浏览器中的创建方式            xmlHttpRequest = new XMLHttpRequest();        }        xmlHttpRequest.onreadystatechange=function(){ // 设置响应http请求状态变化的事件            console.log('请求过程', xmlHttpRequest.readyState);            if(xmlHttpRequest.readyState == 4){ // 判断异步调用是否成功,若成功开始局部更新数据                console.log('状态码为', xmlHttpRequest.status);                if(xmlHttpRequest.status == 200) {                    console.log('异步调用返回的数据为：', xmlHttpRequest .responseText);                    document.getElementById("myDiv").innerHTML = xmlHttpRequest .responseText; // 局部刷新数据到页面                } else { // 如果异步调用未成功,弹出警告框,并显示错误状态码                    alert("error:HTTP状态码为:"+xmlHttpRequest.status);                }            }        }        xmlHttpRequest.open("GET","https://www.runoob.com/try/ajax/ajax_info.txt",true); // 创建http请求，并指定请求得方法（get）、url（https://www.runoob.com/try/ajax/ajax_info.txt）以及验证信息        xmlHttpRequest.send(null); // 发送请求    }</script></head><body>    <div id="myDiv">原数据</div>    <input type = "button" value = "更新数据" onclick = "ajaxHttpRequestFunc()"></body></html> 直接运行该段代码可能会出现跨域的现象，控制台的报错信息如下：这是因为代码中设置请求的是菜鸟驿站服务端的文件，所以出现跨域导致未正常获取到服务端返回的数据。解决办法：复制该段代码在菜鸟驿站的编辑器中粘贴运行即可。点击运行前页面显示为：点击运行后页面显示为：好啦，关于ajax的部分到此就全部学习完成了转载自https://www.jb51.net/article/240522.htm

使用：Easy Mock创建api接口注意：若弹出该invalid or unexpected token错误提示信息，说明编写的数据格式有问题，修改为正确格式即可创建成。随后可以在postman中进行验证：ajax通过GET方法获取数据：根据获取出来得阶段数据来更改相对应得进度：123456789101112131415161718192021222324252627282930313233343536373839<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <link rel="stylesheet" href="2.css" rel="external nofollow" >    <script src="2.js"></script>    <script src="jquery.min.js"></script></head>  <body>    <div class="box">        <div class="pr1">            <span class="circle">1</span>            <span class="line"></span>            <span class="cont1">科研人员申报</span>        </div>        <div class="pr1">            <span class="circle">2</span>            <span class="line"></span>            <span class="cont2">院系申报</span>        </div>        <div class="pr1">            <span class="circle">3</span>            <span class="line"></span>            <span class="cont2">专家评审</span>        </div>        <div class="pr1_last">            <span class="circle">4</span>            <span class="cont2">校级审核</span>        </div>    </div>  </body>  </html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061window.onload = function() {    $(function() {        var b            //使用ajax获取api中得数据，看是那个阶段        $.ajax({            type: 'GET',            url: 'https://mock.mengxuegu.com/mock/624d8ce9f56fd246b02bfcaf/process/getinfo',            success: function(res) {                console.log(res.data[0].BatchState);                b = res.data[0].BatchState;                //利用b数据去改变状态//1未开始，2申报中，3院系审核中，4专家审核中，5校级审核中，6已结束                if (b == 1) {                    $('.cont1').css('color', 'skyblue')                    $('.circle').eq(0).css('background-color', 'skyblue')                }                if (b == 2) {                    $('.line').eq(0).css('border-color', 'green')                    $('.line').eq(0).css('border-style', 'solid')                    $('.circle').eq(0).html('√')                    $('.circle').eq(0).css('background-color', 'green')                    $('.cont1').css('color', 'green')                    $('.circle').eq(1).css('background-color', 'skyblue')                    $('.cont2').eq(0).css('color', 'skyblue')                }                if (b == 3) {                    $('.circle').eq(0).html('√')                    $('.circle').eq(0).css('background-color', 'green')                    $('.circle').eq(1).html('√')                    $('.cont2').eq(0).css('color', 'green')                    $('.circle').eq(1).css('background-color', 'green')                    $('.cont1').css('color', 'green')                    $('.line').eq(0).css('border-color', 'green')                    $('.line').eq(1).css('border-color', 'green')                    $('.line').eq(0).css('border-style', 'solid')                    $('.line').eq(1).css('border-style', 'solid')                    $('.circle').eq(2).css('background-color', 'skyblue')                    $('.cont2').eq(1).css('color', 'skyblue')                }                if (b == 4) {                    $('.circle').eq(0).html('√')                    $('.circle').eq(0).css('background-color', 'green')                    $('.circle').eq(1).html('√')                    $('.cont2').eq(0).css('color', 'green')                    $('.cont2').eq(1).css('color', 'green')                    $('.circle').eq(1).css('background-color', 'green')                    $('.circle').eq(2).css('background-color', 'green')                    $('.cont1').css('color', 'green')                    $('.line').eq(0).css('border-color', 'green')                    $('.line').eq(1).css('border-color', 'green')                    $('.line').eq(2).css('border-color', 'green')                    $('.line').eq(0).css('border-style', 'solid')                    $('.line').eq(1).css('border-style', 'solid')                    $('.line').eq(2).css('border-style', 'solid')                    $('.circle').eq(3).css('background-color', 'skyblue')                    $('.cont2').eq(2).css('color', 'skyblue')                }            }        })      })}1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071* {    margin: 0px;    padding: 0px;}  .box {    width: 305px;    height: 40px;    margin: 20px auto;    line-height: 40px;}  .circle {    position: absolute;    top: 10px;    left: 0px;    display: inline-block;    width: 20px;    height: 20px;    border-radius: 50%;    -moz-border-radius: 50%;    -webkit-border-radius: 50%;    background-color: grey;    line-height: 20px;    text-align: center;    color: white}  .line {    position: absolute;    top: 20px;    left: 19px;    display: inline-block;    width: 70px;    height: 0px;    border-top: grey 1px;    margin: 0px;    border-top-style: dotted}  .pr1 {    float: left;    width: 90px;    height: 40px;    position: relative;    text-align: center;}  .pr1_last {    float: left;    width: 35px;    height: 40px;    position: relative;    text-align: center;}  .cont1 {    position: absolute;    top: 18px;    left: -20px;    font-size: 10px;    color: grey}  .cont2 {    position: absolute;    top: 18px;    left: -10px;    font-size: 10px;    color: grey}到此这篇关于使用Ajax实现进度条的绘制的文章就介绍到这了转载自https://www.jb51.net/article/243559.htm

xhr发起请求123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" >    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script></head>  <body>    <!--1、文件选择框  -->    <input type="file" id="file1">    <!-- 2、上传文件的按钮 -->    <button id="btnupload">上传文件</button>    <br/>    <div class="progress" style="width:300px;margin:5px;">        <div class="progress-bar progress-bar-striped active" style="width: 0%;" id="precent">            0%        </div>    </div>    <!-- 3、img标签 来显示上传成功以后的图片 -->    <img alt="" id="img" width="800">      <script>       var precent = document.querySelector('#precent')        var btnupload = document.querySelector('#btnupload')        btnupload.addEventListener('click', function() {            var files = document.querySelector('#file1').files            if (files.length <= 0) {                return alert('请选择要上传的文件')            }              var fd = new FormData()            fd.append('avatar', files[0])            var xhr = new XMLHttpRequest()              xhr.upload.onprogress = function(e) {                console.log(e);                if (e.lengthComputable) {                    var h = Math.ceil((e.loaded / e.total) * 100)                    precent.style.width = h + '%'                    precent.innerHTML = h + '%'                    console.log(h);                }            }            xhr.upload.onload = function() {                $('#precent').removeClass().addClass('progress-bar progress-bar-success')            }              xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar')            xhr.send(fd)            xhr.onreadystatechange = function() {                if (xhr.readyState == 4 && xhr.status == 200) {                    var data = JSON.parse(xhr.responseText)                    console.log(data);                    if (data.status == 200) {                        console.log('上传成功');                        document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url                    } else {                        console.log('上传失败');                    }                }            }        })    </script></body>  </html>ajax发起请求123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <script src="jquery.js"></script>    <style>        img {            width: 50px;            height: 50px;            display: none;        }    </style></head>  <body>    <input type="file" id="file1">    <button id="btnupload">上传文件</button>    </br>    <img src="5-121204193R5-50.gif" alt="" id="loading">    <script>        $(function() {            $(document).ajaxStart(function() {                $('#loading').show()            })            $(document).ajaxStop(function() {                $('#loading').hide()            })            $('#btnupload').on('click', function() {                var files = $('#file1')[0].files                if (files.length <= 0) {                    alert('请选择文件')                }                console.log('ok');                var fd = new FormData()                fd.append('avatar', files[0])                $.ajax({                    method: 'POST',                    url: 'http://www.liulongbin.top:3006/api/upload/avatar',                    data: fd,                    processData: false,                    contentType: false,                    success: function(res) {                        console.log(res);                    }                })              })          })    </script></body>  </html>到此这篇关于Ajax实现上传图像功能的示例详解的文章就介绍到这了转载自https://www.jb51.net/article/243978.htm

AJAX、Fetch、axiosAJAXAJAX可以在不更新全局的情况下更新局部页面。通过在与服务器进行数据交换，可以使网页实现异步更新。AJAX的原理就是通过XHR对象来向服务器发起异步请求，从服务器获得数据，然后用JS来操作DOM更新页面。领导想找小李汇报一下工作，就委托秘书去叫小李，自己就接着做其他事情，直到秘书告诉他小李已经到了，最后小李跟领导汇报工作。Ajax请求数据流程与“领导想找小李汇报一下工作”类似，上述秘书就相当于XMLHttpRequest对象，领导相当于浏览器，响应数据相当于小李。浏览器可以发送HTTP请求后，接着做其他事情，等收到XHR返回来的数据再进行操作。创建AJAX123456789101112// 1. 创建 XMLHttpRequest 实例let xhr = XMLHttpRequest()// 2. 打开和服务器的连接xhr.open('get', 'URL')// 3.发送xhr.send()// 4. 接收变化。xhr.onreadystatechange = () => {    if(xhr.readyState == 4 && xhr.status == 200){   // readyState: ajax 状态，status：http 请求状态        console.log(xhr.responseText);   //响应主体    }}• 创建AJAX实例：let xhr = new XMLHttpRequest()• 打开请求，配置请求前的配置项：xhr.open([http method], [url], [async], [userName], [userPass])1. http methods 请求方式：post，get，delete，put，head，options，trace，connect2. url：想服务器请求的路径3. async：是否为异步请求4. userName、userPass：用户名与密码• 通过XMLHttpRequest.open()方法与服务器建立连接• 发送请求：XMLHttpRequest.send() 方法中如果 Ajax 请求是异步的则这个方法发送请求后就会返回，如果Ajax请求是同步的，那么请求必须知道响应后才会返回。• 通过XMLHttpRequest对象的onreadystatechange事件监听服务器端的通信状态• 接收数据并进行处理• 将处理后的结果更新到页面上AJAX的缺点：• 本是针对MVC架构，不符合前端MVVM的浪潮• 基于原生的XHR开发• 配置和调用方式混乱axios原理axios是使用promise封装的ajax，它内部有两个拦截器，分别是request拦截器和response拦截器。• 请求拦截器的作用是在请求发送之前进行一些操作，例如在每个请求体上加入token• 响应拦截器的作用是接收到响应后做的一些操作，例如登录失效后需要重新登录跳转到登录页axios的特点• 由浏览器端发起请求，在浏览器中创建XHR• 支持promise API• 监听请求和返回• 更好的格式化，自动将数据转换为json数据• 安全性更高，可抵御CSRF攻击axios常用的方法axios常用的方法有get、post、put、patch、delete等。其中get和post返回的都是promise对象，可以使用promise方法axios.get(url[, config])：get请求用于列表和信息查询1234567891011axios.get('apiURL', {    param: {        id: 1    }    // param 中的的键值对最终会 ? 的形式，拼接到请求的链接上，发送到服务器。}).then(res => {    console.log(res);}).catch( error => {    console.log(error)}axios.delete(url[, config])：删除123456axios.delete('apiURL', {    params: {        id: 1    },    timeout: 1000})axios.post(url[, data[, config]])：post请求用于信息的添加123456789axios.post('apiURL',{        user: '小新',        age: 18}).then( res => {    console.log(res);}).catch( error => {    console.log(error)}axios.put(url[, data[, config]])：更新操作123axios.put('apiURL', {    name: '小新',})axios.patch(url[, data[, config]])：更新操作12345axios.patch('apiURL', {    id: 13,},{   timeout: 1000,})put和patch的区别patch方法用来更新局部资源，假设我们有一个UserInfo，里面有userId，userName，userGender等10个字段。可你的编辑功能因为需求，在某个特别的页面里只能修改userName，这个时候就可以使用patch。put也适用于更新数据，但必须提供完整的资源对象。axios相关配置• url：用于请求服务器的url• method：请求方法，默认为get• baseURL：会自动加到url前面• proxy：用于配置代理• transformRequest：允许在服务器发送请求之前修改请求数据axios拦截器执行顺序问题• 请求拦截：axios的请求拦截器会先执行最后指定的回调函数，再依次向前执行• 响应拦截：axios的响应拦截器会先执行最先执行的回调函数，再依次向前执行例如：1234567891011121314151617181920212223242526272829axios.interceptors.request.use(config => {  console.log(`请求拦截1`);  return config;});axios.interceptors.request.use(config => {  // 在发送请求之前做些什么   console.log(`请求拦截2`);  return config;}); // 添加响应拦截器 axios.interceptors.response.use(response => {  // 对响应数据做点什么   console.log(`成功的响应拦截1`);  return response.data;}); // 添加响应拦截器 axios.interceptors.response.use(response => {  // 对响应数据做点什么   console.log(`成功的响应拦截2`);  return response;}); // 发送请求 axios.get('/posts')  .then(response => {    console.log('成功了');  }) 执行结果为console.log("请求拦截2");console.log("请求拦截1");console.log("成功的响应拦截1");console.log("成功的响应拦截2");console.log("成功了");为什么axios中需要拦截器在SPA应用中，通常会使用token进行用户身份认证，这就要求每次请求必须携带用户的身份信息，针对这个需求，为了避免在每个请求中单独处理，我们可以通过封装统一的request函数来为每隔请求统一添加token信息。但如果想为某些请求添加缓存时间或者控制某些请求的调用频率的话，我们就需要不断地修改request函数来扩展对应的功能。此时，如果在考虑对响应进行统一处理，我们的request函数将变得越来越庞大，也越来越难维护。所以axios为我们提供了拦截器。为什么请求拦截2会在请求拦截1之前执行呢？在axios源码中将发送请求分为了请求拦截器、发送请求、响应拦截器、相应回调，通过Promise的链式调用将这些部分结合起来了，这样就得到了发送请求拿到数据的全部过程。下面分析源码：• 代码开始构建了一个config配置对象，用于第一次执行Promise返回一个成功的Promise• 最核心的数组chain，这个数组中保存了请求拦截器、响应拦截器和发送请求函数。该数组中间放的是发送请求的函数，左边放的是请求拦截器，右边放的是响应拦截器。在第一步中返回的Promise对象，将遍历chain数组逐一执行里面的函数，并返回新的Promise对象• 往数组中添加请求拦截函数，依照axios请求的执行顺序，请求拦截器应该在发送请求之前执行，故应该添加在发送请求函数的前面，使用unshift方法• 往数组中添加响应拦截器函数，依照axios请求的执行顺序，响应拦截器应该在发送请求之后执行，故应该添加在发送请求函数的后面，所以使用的是数组的push方法• Promise遍历执行，每次从chain中取出两个 函数执行（一个成功回调，一个失败回调）• 最后返回一个Promise对象，用于执行响应数据的回调fetchfetch是http请求数据的方式，它使用Promise，但不使用回调函数。fetch采用模块化设计，通过数据流处理数据，对于请求大文件或网速慢的情况相当有用。默认情况下fetch不会接收或发送cookies。优点：• 采用模块化思想，将输入、输出、状态跟踪分离• 基于promise，返回一个promise对象缺点：• 过于底层，有很多状态码没有进行封装• 无法阻断请求• 兼容性差无法检测请求进度Fetch、ajax与axios的区别• 传统的ajax利用的是HMLHttpRequest这个对象，和后端进行交互。• 而JQury ajax是对原生XHR的封装，多请求间有嵌套的话就会出现回调地狱的问题。• axios使用promise封装XHR，解决了回调地狱的问题。而Fetch没有使用XHR，使用的是promiseFetch和Ajax比有什么优点Fetch使用的是promise，方便使用异步，没有回调地狱的问题。总结Ajax是一种web数据交互的方式，它可以使页面在不重新加载的情况下请求数据并进行局部更新，它内部使用了XHR来进行异步请求。Ajax在使用XHR发起异步请求时得到的是XML格式的数据，如果想要JSON格式，需要进行额外的转换；Ajax本身针对的是MVC框架，不符合现在的MVVM架构；Ajax有回调地狱问题；Ajax的配置复杂而Fetch是XHR的代替品，它基于Promise实现的，并且不使用回调函数，它采用模块化结构设计，并使用数据流进行传输，对于大文件和网速慢的情况非常友好。但是Fetch不会对请求和响应进行监听；不能阻断请求；过于底层，对一些状态码没有封装；兼容性差。axios是基于Promise对XHR进行封装，它内部封装了两个拦截器，分别是请求拦截器和响应拦截器。请求拦截器用于在请求发出之前进行一些操作，比如：设置请求体，携带Cookie、token等；响应拦截器用于在得到响应后进行一些操作，比如：登录失效后跳转到登录页面重新登录。axios有get、post、put、patch、delete等方法。axios可以对请求和响应进行监听；返回Promise对象，可以使用Promise的API；返回JSON格式的数据；由浏览器发起请求；安全性更高，可以抵御CSRF攻击。axios源码分析axios的执行流程• 使用axios.create创建单独的实例，或直接使用axios实例• 对于axios调用进入到request()中进行处理• 执行请求拦截器• 请求数据转换器，将传入的数据进行处理，比如JSON.stringify(data)• 执行适配器，判断是浏览器端还是node端，以执行不同的方法• 响应数据转换器，对服务器端的数据进行处理，比如JSON.parse(data)• 执行响应拦截器，对服务器端数据进行处理，比如token失效跳转到登录页• 返回数据入口文件(lib/axios.js)导出的axios就是 实例化后的对象，还在其上挂载create方法，以供创建独立的实例，实现实例之间互不影响。12345678910111213// 创建实例过程的方法function createInstance(defaultConfig) {  return instance;}// 实例化var axios = createInstance(defaults);  // 创建独立的实例，隔离作用域axios.create = function create(instanceConfig) {  return createInstance(mergeConfig(axios.defaults, instanceConfig));};// 导出实例module.exports = axios;createInstance()123456789101112131415161718function createInstance(defaultConfig) {  // 实例化，创建一个上下文  var context = new Axios(defaultConfig);    // 平时调用的 get/post 等等请求，底层都是调用 request 方法  // 将 request 方法的 this 指向 context(上下文)，形成新的实例  var instance = bind(Axios.prototype.request, context);    // Axios.prototype 上的方法 (get/post...)挂载到新的实例 instance 上，  // 并且将原型方法中 this 指向 context  utils.extend(instance, Axios.prototype, context);    // Axios 属性值挂载到新的实例 instance 上  // 开发中才能使用 axios.default/interceptors  utils.extend(instance, context);    return instance;}createInstance执行流程：• 通过构造函数Axios创建实例context，作为下面request方法的上下文(this指向)• 将Axios.prototype.request方法作为实例使用，并把this指向context，形成新的实例instance• 将构造函数Axios.prototype上的方法挂载到新的实例instance上，然后将原型各个方法中的this指向context，这样才能使用get、post等方法• 将Axios的属性挂载到instance上可以看到axios不是简单的创建实例context，而是在context上进行this绑定形成新的实例，然后将Axios属性和请求方法挂载到新的实例上拦截器(lib/core/InterceptorManager.js)拦截器涉及一个属性和三个方法：• handler：存放use注册的回调函数• use：注册成功和失败的回调函数• eject：删除注册过的函数• forEach：遍历回调函数123456789101112131415161718192021222324252627282930function InterceptorManager() {  // 存放 use 注册的回调函数  this.handlers = [];} InterceptorManager.prototype.use = function use(fulfilled, rejected, options) {  // 注册成功和失败的回调函数  this.handlers.push({    fulfilled: fulfilled,    rejected: rejected,    ...  });  return this.handlers.length - 1;}; InterceptorManager.prototype.eject = function eject(id) {  // 删除注册过的函数  if (this.handlers[id]) {    this.handlers[id] = null;  }}; InterceptorManager.prototype.forEach = function forEach(fn) {  // 遍历回调函数，一般内部使用多  utils.forEach(this.handlers, function forEachHandler(h) {    if (h !== null) {      fn(h);    }  });};dispatchRequest(lib/core/dispatchRequest.js)dispatchRequest主要做了以下操作：• transformRequest: 对 config 中的 data 进行加工，比如对 post 请求的 data 进行字符串化(JSON.stringify(data))• adapter：适配器，包含浏览器端 xhr 和 node 端的 http• transformResponse: 对服务端响应的数据进行加工，比如 JSON.parse(data)取消请求(lib/cancel/CancelToken.js)12345678910111213var CancelToken = axios.CancelToken;var source = CancelToken.source();axios.get('/user/12345', {  cancelToken: source.token}).catch(function(thrown) {  if (axios.isCancel(thrown)) {    console.log('Request canceled', thrown.message);  } else {    // 处理错误  }});// 取消请求（message 参数是可选的）source.cancel('Operation canceled by the user.');• CancelToken 挂载 source 方法用于创建自身实例，并且返回 {token, cancel}• token 是构造函数 CancelToken 的实例，cancel 方法接收构造函数 CancelToken 内部的一个 cancel 函数，用于取消请求• 创建实例中，有一步是创建处于 pengding 状态的 promise，并挂在实例方法上，外部通过参数 cancelToken 将实例传递进 axios 内部，内部调用 cancelToken.promise.then 等待状态改变• 当外部调用方法 cancel 取消请求，pendding 状态就变为 resolve，即取消请求并且抛出 reject(message)总结• 为了支持 axios() 简洁写法，内部使用 request 函数作为新实例• 使用 promsie 链式调用的巧妙方法，解决顺序调用问题• 数据转换器方法使用数组存放，支持数据的多次传输与加工• 适配器通过兼容浏览器端和 node 端，对外提供统一 api• 取消请求这块，通过外部保留 pendding 状态，控制 promise 的执行时机到此这篇关于一文掌握ajax、fetch和axios的区别对比的文章就介绍到这了转载自https://www.jb51.net/article/250151.htm

1.$.ajax的简介       Ajax主要作用于异步刷新之中，他是Asynchronous Javascript + XML的缩写，以前写Ajax操作，原始的Ajax请求操作需要好几个必备的步骤操作核心XMLHttpRequest对象，而JQuery为了简化操作对Ajax异步操作进行了封装，就有这几种常用的请求方式： $.ajax，$.post， $.get等。       其中$.ajax是JQuery对ajax最基础的封装，通过使用这个函数可以完成异步通讯的所有功能。也就是可以通过此方法进行异步刷新的操作。但是它的参数较多操作还是有些繁琐。        主要参数有：method是数据的提交方式：get和post;url是数据的提交路劲；async是是否支持异步刷新，默认是true；data是需要提交的数据；dataType是服务器返回数据的类型：xml,String,Json等；success是请求成功后的回调函数；error是请求失败后的回调函数。$.ajax({ async:false, type: "POST", url: '${pageContext.request.contextPath}/test', dataType:“json”, data: {"id": id}, contentType: "application/json;charset=UTF-8", success: function(rtn){ console.log("success") }, error: function(rtn){ console.log("error") }, });      需要注意的是data参数: 如果是Object或String类型的参数，发送到服务器的数据已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后面防止这种自动转换。所以对象必须为key/value格式，例如{key1:"val1",key2:"val2"}转换拼接在url后面就是&key1=val1&key2=val2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{key:["val1","val2"]}转换后为&ksy=val1&key=val2。       还需要注意的是dataType参数: 如果为String类型的参数，如果不指定，JQuery将自动根据http包会返回responseXML或responseText并作为回调函数参数传递。可用的类型如下：       xml：返回XML文档，可用JQuery处理；html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行；script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时不在同一个域下所有post请求都将转为get请求； json：返回JSON数据； jsonp：JSONP格式。使用SONP形式调用函数时，例如url?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数； text：返回纯文本字符串。2.$.ajax与后端的交互2.1 GET请求      后端不能使用@RequestBody来接收参数，因为往GET请求里加body是不符合规范的，不保证所有的实现都支持，所以在ajax 里注意请求方式如果用 get 后端参数不能用@RequestBody 来接收它，只能通过@RequestParam来接收参数，或者通过request.getParameter("参数名")。2.2 POST请求      后端可以使用@RequestBody和@RequestParam来接收参数，但是如果使用@RequestBody注解，对于参数转化的配置必须统一，需要和后面的实体类进行一一对应，要不会取不到值，也可以使用多个@RequestParam获取数据。      ajax请求默认contentType=application/x-www-form-urlencoded;charset:utf-8，这种格式为表单提交格式，数据为key1=value1&key2=value2格式。不使用contentType:“application/json;charset=UTF-8”， 则data里可以是json对象，在使用contentType:‘application/json;charset=UTF-8’，data里就需要传json字符串。     使用：contentType:‘application/json;charset=UTF-8’, 参数中配合：data:JSON.stringify()来进行使用。     以上就是对$.ajax的简单认识和总结。

lask 实现ajax 数据入库在正式编写前需要了解一下如何在 python 函数中去判断，一个请求是 get 还是 post。python 文件代码如此所示：# route()方法用于设定路由； @app.route('/hello.html', methods=['GET', 'POST']) def hello_world(): if request.method == 'GET': # args = request.args return render_template('hello.html') if request.method == "POST": print("POST请求")上述代码通过 requests.method 属性判断当前请求类型，然后实现相应的逻辑。注意上述内容中的 @app.route('/hello.html', methods=['GET', 'POST']) ，绑定的方法由参数 methods 决定。HTML 页面代码如下所示：<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>这是第一个HTML页面</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> {{name}} <input type="button" value="点击发送请求" id="btn" /> <script> $(function() { $('#btn').on('click', function() { alert($(this).val()); }); }) </script> </body> </html>在 HTML 页面中提前导入 jquery 的 CDN 配置，便于后续实现模拟请求操作。再次完善一些 POST 请求的相关参数判断，通过 requests.form 获取表单参数。# route()方法用于设定路由； @app.route('/hello.html', methods=['GET', 'POST']) def hello_world(): if request.method == 'GET': args = request.args name = args.get('name') return render_template('hello.html',name=name) if request.method == "POST": print("POST请求") arges = request.form print(arges) return "PPP"同步修改一下前端请求部分，这里改造主要需要的是前端知识。<body> {{name}} <input type="button" value="点击发送请求" id="btn" /> <script> $(function() { $('#btn').on('click', function() { //alert($(this).val()); $.post('./hello.html', function(result) { console.log(result); }) }); }) </script> </body>测试的时候同步开启浏览器的开发者工具，并且切换到网络请求视图，查看请求与返回数据。数据传递到后台之后，只需要使用上一篇博客涉及的内容即可将数据存储到 MySQL 中。实现文件上传了解了POST请求之后，就可以通过该模式实现文件上传操作了。优先修改 HTML 页面，实现一个文件选择按钮。<input type="file" id="file" /> <script type="text/javascript"> $(function() { $('#btn').on('click', function() { //alert($(this).val()); $.post('./hello.html', function(result) { console.log(result); }) }); var get_file = document.getElementById("file"); get_file.onchange = function(e) { file = e.currentTarget.files[0]; //所有文件，返回一个数组 var form_data = new FormData(); form_data.append("file", file); console.log(form_data); form_data.append("file_name", e.currentTarget.files[0].name); $.ajax({ url: '/upload', type: 'post', data: form_data, contentType: false, processData: false, success: function(res) { console.log(res.data); } }); } }) </script>服务端处理文件的代码如下所示@app.route('/upload', methods=['POST'], strict_slashes=False) def upload(): if request.method == "POST": print("POST请求") file = request.files.get('file') name = request.form.get('file_name') print(name) file.save("./"+name) # print(name) return "PPP"这里需要注意的是如果 Python 端存在BUG，前端的AJAX请求会出现 400或者500错误。文件名通过前端传递 file_name 参数获取。本案例可以扩展上传成功之后，返回JSON数据到前端进行后续处理。项目在实测的过程中发现一个问题，在读取前台传递的文件流时，需要使用 request.files.get() 方法实现，而不能用 request.form['参数名'] 。原文链接：https://bbs.huaweicloud.com/blogs/334929

在ajax中有一个async属性，这个值一定要设置成false，ajax默认的async是true。 async：异步属性，如果是true的话，嵌套的ajax也会异步（和外层的ajax同时）执行，这时候可能会造成数据没有获取到，或者获取到错误的数据信息，造成异常。 function submitFlag() {      //获得自己的个人信息      var userName = "";      $.ajax({          type:"get",          url:"/util/post/onlyUserMySelf",          data_obj:"json",          async:false,          success:function (result) {              userName = result.userName;          }      })      alert(userName);  }

AJAX Live Search在下面的实例中，我们将演示一个实时的搜索，在您键入数据的同时即可得到搜索结果。实时的搜索与传统的搜索相比，具有很多优势：当键入数据时，就会显示出匹配的结果当继续键入数据时，对结果进行过滤如果结果太少，删除字符就可以获得更宽的范围在下面的文本框中输入 "HTML"，搜索包含 HTML 的页面：上面实例中的结果在一个 XML 文件（links.xml）中进行查找。为了让这个例子小而简单，我们只提供 6 个结果。实例解释 - HTML 页面当用户在上面的输入框中键入字符时，会执行 "showResult()" 函数。该函数由 "onkeyup" 事件触发：<html><head><script>function showResult(str){    if (str.length==0)    {         document.getElementById("livesearch").innerHTML="";        document.getElementById("livesearch").style.border="0px";        return;    }    if (window.XMLHttpRequest)    {// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行        xmlhttp=new XMLHttpRequest();    }    else    {// IE6, IE5 浏览器执行        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");    }    xmlhttp.onreadystatechange=function()    {        if (xmlhttp.readyState==4 && xmlhttp.status==200)        {            document.getElementById("livesearch").innerHTML=xmlhttp.responseText;            document.getElementById("livesearch").style.border="1px solid #A5ACB2";        }    }    xmlhttp.open("GET","livesearch.php?q="+str,true);    xmlhttp.send();}</script></head><body><form><input type="text" size="30" onkeyup="showResult(this.value)"><div id="livesearch"></div></form></body></html>源代码解释：如果输入框是空的（str.length==0），该函数会清空 livesearch 占位符的内容，并退出该函数。如果输入框不是空的，那么 showResult() 会执行以下步骤：创建 XMLHttpRequest 对象创建在服务器响应就绪时执行的函数向服务器上的文件发送请求请注意添加到 URL 末端的参数（q）（包含输入框的内容）PHP 文件上面这段通过 JavaScript 调用的服务器页面是名为 "livesearch.php" 的 PHP 文件。"livesearch.php" 中的源代码会搜索 XML 文件中匹配搜索字符串的标题，并返回结果：<?php$xmlDoc=new DOMDocument();$xmlDoc->load("links.xml");$x=$xmlDoc->getElementsByTagName('link');// 从 URL 中获取参数 q 的值$q=$_GET["q"];// 如果 q 参数存在则从 xml 文件中查找数据if (strlen($q)>0){    $hint="";    for($i=0; $i<($x->length); $i++)    {        $y=$x->item($i)->getElementsByTagName('title');        $z=$x->item($i)->getElementsByTagName('url');        if ($y->item(0)->nodeType==1)        {            // 找到匹配搜索的链接            if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))            {                if ($hint=="")                {                    $hint="<a href='" .                     $z->item(0)->childNodes->item(0)->nodeValue .                     "' target='_blank'>" .                     $y->item(0)->childNodes->item(0)->nodeValue . "</a>";                }                else                {                    $hint=$hint . "<br /><a href='" .                     $z->item(0)->childNodes->item(0)->nodeValue .                     "' target='_blank'>" .                     $y->item(0)->childNodes->item(0)->nodeValue . "</a>";                }            }        }    }}// 如果没找到则返回 "no suggestion"if ($hint==""){    $response="no suggestion";}else{    $response=$hint;}// 输出结果echo $response;?>

实例解释 - HTML 页面当用户在上面的输入框中键入字符时，会执行 "showHint()" 函数。该函数由 "onkeyup" 事件触发：<html><head><script>function showHint(str){    if (str.length==0)    {         document.getElementById("txtHint").innerHTML="";        return;    }    if (window.XMLHttpRequest)    {        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行的代码        xmlhttp=new XMLHttpRequest();    }    else    {            //IE6, IE5 浏览器执行的代码        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");    }    xmlhttp.onreadystatechange=function()    {        if (xmlhttp.readyState==4 && xmlhttp.status==200)        {            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;        }    }    xmlhttp.open("GET","gethint.php?q="+str,true);    xmlhttp.send();}</script></head><body><p><b>在输入框中输入一个姓名:</b></p><form> 姓名: <input type="text" onkeyup="showHint(this.value)"></form><p>返回值: <span id="txtHint"></span></p></body></html>源代码解释：如果输入框是空的（str.length==0），该函数会清空 txtHint 占位符的内容，并退出该函数。如果输入框不是空的，那么 showHint() 会执行以下步骤：创建 XMLHttpRequest 对象创建在服务器响应就绪时执行的函数向服务器上的文件发送请求请注意添加到 URL 末端的参数（q）（包含输入框的内容）PHP 文件上面这段通过 JavaScript 调用的服务器页面是名为 "gethint.php" 的 PHP 文件。"gethint.php" 中的源代码会检查姓名数组，然后向浏览器返回对应的姓名：<?php// 将姓名填充到数组中$a[]="Anna";$a[]="Brittany";$a[]="Cinderella";$a[]="Diana";$a[]="Eva";$a[]="Fiona";$a[]="Gunda";$a[]="Hege";$a[]="Inga";$a[]="Johanna";$a[]="Kitty";$a[]="Linda";$a[]="Nina";$a[]="Ophelia";$a[]="Petunia";$a[]="Amanda";$a[]="Raquel";$a[]="Cindy";$a[]="Doris";$a[]="Eve";$a[]="Evita";$a[]="Sunniva";$a[]="Tove";$a[]="Unni";$a[]="Violet";$a[]="Liza";$a[]="Elizabeth";$a[]="Ellen";$a[]="Wenche";$a[]="Vicky";//从请求URL地址中获取 q 参数$q=$_GET["q"];//查找是否由匹配值， 如果 q>0if (strlen($q) > 0){    $hint="";    for($i=0; $i<count($a); $i++)    {        if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))        {            if ($hint=="")            {                $hint=$a[$i];        

ajax如何实现页面的局部加载，具体如下点击头部即右上角的链接时，页面会根据相应的链接加载新的内容，显示在下方；在中间区域有3栏，当点击1栏中的链接，2栏中会显现相应的内容，点击2栏中的内容，3栏中的内容又会根据2栏的链接来加载显示内容。页面效果如下：js代码如下：12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576$("header a").on("click",function(e){ e.preventDefault(); //阻止事件默认行为 var href = this.href; //记录要加载页面的链接  //更新当前连接状态 $("header a").removeClass("current"); $(this).addClass("current");  var $content = $("#content"); var $container = $("#container"); $container.remove(); $content.load(href + " #container"); //加载页面id = container的内容  });   var times; //times用来存储所有活动的环节时间表 $.ajax({ type:"get", //指定get方式 url:"example.json", async:true, beforeSend: function(jqXHR){   //在浏览器请求JSON数据之前，脚本会检查浏览器是否支持overrideMineType()方法。  //该方法会用来告知服务器应当返回JSON数据。  //当服务器意外配置成返回其他格式的数据时，就可以使用这个方法了  if(jqXHR.overrideMimeType){  jqXHR.overrideMimeType("application/json");   } } });  function loadTimeTable(){//加载example.json文件中加载时间表的数据 $.getJSON(  "example.json" ).done(function(data){ //加载成功，值被保存到times中  //console.log(data);  times = data; }).fail(function(){ //加载失败  $("#event").html("Sorry!we could not load the timetable at the moment"); }); }  loadTimeTable(); //调用函数  //点击活动名称，将该活动的时间加载到中栏 $("#content").on("click","#event a",function(e){ e.preventDefault();   var loc = this.id.toUpperCase(); //保存活动位置的名称 var newContent = ''; //设置展示样式排版 for(var i = 0; i < times[loc].length; i++){  //alert(times[loc][i].time);  newContent += '<li><span class="time">' +times[loc][i].time +'</span>';  newContent += '<a href="descriptions.html#" rel="external nofollow" title="' +times[loc][i].title.replace(/ /g,'-')+ '">';  newContent += times[loc][i].title + '</a></li>'; }  $("#sessions").html('<ul>'+newContent+'</ul>');  $("#event a").removeClass("current"); //更新活动链接的class属性，借此凸显当前活动 $(this).addClass("current");  $("#details").text(''); //如果第三栏中包含内容，就清空它 });   //点击中栏中的环节是产生相应，它会加载环节的描述信息 $("#content").on("click","#sessions a",function(e){ e.preventDefault(); var fragment = this.href.replace('#',' #'); //更新当前连接状态 $("#details a").removeClass("current"); $(this).addClass("current");  $("#details").load(fragment+this.title); //查找到descriptions.html页面中id对应的部分加载到当前页面 });

如何封装Ajax函数 一个Ajax函数：  一个Ajax函数 var xhr = null; if(window.XMLHttpRequest){    xhr = new XMLHttpRequest; }else{    xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open("GET","https://jsonplaceholder.typicode.com/users"); xhr.send(null); xhr.onreadystatechange = function(){    if(this.readyState === 4){         console.log(xhr.responseText)     } } 封装自己的 Ajax 函数 参数1：{string} 请求方法--method 参数2：{string} 请求地址--url 参数3：{object} 请求参数--params 参数4：{function} 请求完成后，执行的回调函数--done  function ajax(method,url,params,done){   统一将method方法中的字母转成大写，后面判断GET方法时 就简单点   method = method.toUpperCase();    IE6的兼容   var xhr = window.XMLHttpRequest    ? new XMLHttpRequest()    : new ActiveXObject("Microsoft.XMLHTTP");   创建打开一个连接 open                将对象格式的参数转为urlencoded模式   新建一个数组，使用for循环，将对象格式的参数，   以（id = 1）的形式，每一个键值对用 & 符号连接  var pairs = [];  for(var k in params){      pairs.push(k + "=" + params[k]);   }   var str = pairs.join("&");          //判断是否是get方法 ， get方法的话，需要更改url的值  if(method == "GET"){        url += "?" + str;   }               创建打开一个连接  xhr.open(method,url); var data = null; if(method == "POST"){     //post方法 还需要设置请求头、请求体     xhr.setRequestHeader("Content-Type",     "application/x-www-form-urlencoded");     data = str;                   } xhr.send(data); 执行回调函数 xhr.onreadystatechange = function(){    if(this.readyState == 4) {        done(JSON.parse(this.responseText));    }return;     执行外部传进来的回调函数即可   需要用到响应体    } }   调用函数 get方法  ajax("GET","http://localhost:3000/users",     {"id":1},     function(data){         console.log(data);   }); post方法      ajax("POST", "http://localhost:3000/users",  { "name": "lucky","class":2,"age":20 },  function (data) {      console.log(data); 

功能说明当用户在注册页面输入用户名并且鼠标焦点离开输入框时，到数据表中去验证该用户名是否已经存在，如果存在提示不可用，否则，提示可用。接口123public interface UserDao { public User findName(String name);}接口实现类12345678910111213141516171819202122232425262728import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException; public class UserDaoImpl implements UserDao {  @Override public User findName(String name) {  User user =null;  Connection conn = DBHelper.getConn();  String sql = "select * from user where name=?";  try {   PreparedStatement ps = conn.prepareStatement(sql);   ps.setString(1,name);   ResultSet rs = ps.executeQuery();   if (rs.next()){    user = new User();    user.setId(rs.getInt(1));    user.setName(rs.getString(2));    user.setPassword(rs.getString(3));   }  } catch (SQLException e) {   e.printStackTrace();  }  return user; }}servlet1234567891011121314151617181920212223242526import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException; @WebServlet("/findName")public class FindNameServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  request.setCharacterEncoding("utf-8");  response.setContentType("text/html;charset=utf-8");  String name = request.getParameter("name");  UserDao userDao = new UserDaoImpl();  User name1 = userDao.findName(name);  if (name1!=null){   response.getWriter().write("1");  }else {   response.getWriter().write("2");  } }  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  this.doPost(request, response); }}JSP页面123456789101112131415161718192021222324252627282930313233<%@ page contentType="text/html;charset=UTF-8" language="java" %><html> <head> <title>AJAX实际操作注册验证用户名</title> <script src="js/jquery-1.8.3.js"></script> </head> <body> <form action="#" method="post"> <script type="text/javascript">  $(function () {   $("[name=userName]").blur(function () {    $.ajax({     type:"get",     url:"findName?name="+$("[name=userName]").val(),     dataType:"text",     success:function (data) {      //alert(data);      if (data=="1"){       $("#show").html("用户已存在！！！")      }else {       $("#show").html("用户名可用")      }     }    })   })  }); </script> 账号<input type="text" name="userName"><span id="show"></span></br> 密码<input type="password" name="password"></br> <input type="submit" value="提交"> </form> </body></html>