十七 Ajax&JQuery

发布时间：2020-12-16 02:59:12 所属栏目：百科来源：网络整理

导读：Ajax：即" Asynchronous?JavaScript?And?XML "，异步JavaScript和XML ，是指一种创建的交互式页面应用的网页开发技术，它并不是新的技术 ajax?并非一种新的技术，而是几种原有技术的结合体。由以下几种技术组合而成： 1.使用CSS和XHTML来表示 2.使用DOM

Ajax：

即"Asynchronous?JavaScript?And?XML"， 异步JavaScript和XML ，是指一种创建的交互式页面应用的网页开发技术，它并不是新的技术

ajax?并非一种新的技术，而是几种原有技术的结合体。由以下几种技术组合而成：

1.使用CSS和XHTML来表示
2.使用DOM模型来交互和动态显示
3.XMLHTTPRequest来和服务器进行异步通信,是ajax的基础(详见w3cShool)
4.使用JavaScript来绑定和调用

在以上所述技术中，除了XmlHttpRequest对象以外，其他所有的技术都是基于Web标准并且已经得到了广泛使用，XMLHTTPRequest虽然还没有被W3C采纳，但已经是一种事实的标准。

典例：

注册网站时，提示输入的用户名已经被注册

作用：

如果想要刷新网页局部内容，那么需要重新载入整个网页。Ajax解决了局部刷新的问题，提高了用户体验。

1 Ajax的简单使用

创建对象:

function ajaxFunction(){
       var xmlHttp;
       try{ // Firefox,Opera 8.0+,Safari
            xmlHttp=new XMLHttpRequest();
        }
        catch (e){
           try{// Internet Explorer
                 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
              }
            catch (e){
              try{
                 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
              catch (e){}
              }
        }

        return xmlHttp;
     }

发送请求：

     //执行get请求
     function get(){
         // 1 创建xmlhttprequest对象
          var request =  ajaxFunction()
         // 2 发送请求  参数一  请求类型  参数二 路径 参数三 是否异步
         request.open("GET","/8AjaxAndJquery/ServletDemo01",true);
         request.send();
     }

2 AJAX GET?向服务器发送数据，获取服务器响应的数据

/*     //向Servlet发送数据
     function get(){
         // 1 创建xmlhttprequest对象
          var request =  ajaxFunction()
         // 2 发送请求  参数一  请求类型  参数二 路径 参数三 是否异步
         request.open("GET","/8AjaxAndJquery/ServletDemo01?name=aa&age=18",true);
         request.send();
     } */
     
     //接收Servlet响应的数据
     function get(){
         // 1 创建xmlhttprequest对象
          var request =  ajaxFunction()
         // 2 发送请求  参数一  请求类型  参数二 路径 参数三 是否异步
         request.open("GET",true);
         // 3 获取响应数据,注册监听的意思，如果状态改变，执行等号右边的方法
         request.onreadystatechange = function(){
             if(request.readyState == 4 && request.status == 200){
                 //弹出响应的信息
                 alert(request.responseText);
             }
         }
         request.send();
     }

3 AJAX POST 向服务器发送数据，获取服务器响应的数据

//1 创建对象
function ajaxFunction(){
       var xmlHttp;
       try{ // Firefox,Safari
            xmlHttp=new XMLHttpRequest();
        }
        catch (e){
           try{// Internet Explorer
                 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
              }
            catch (e){
              try{
                 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
              catch (e){}
              }
        }

        return xmlHttp;
     }
     
 //2 发送请求
    function post(){
       // 1 创建对象
       var request = ajaxFunction();
       // 2 发送请求
       request.open("POST",true);
      
// 如果要获取数据，加一个状态的监听
       request.onreadystatechange = function(){
           if(request.readyState == 4 && request.status == 200){
               alert("post:"+request.responseText);
           }
       }
       // 3 带数据过去
       //如果是post请求，那么这里要添加请求头，说明提交的数据是一个经过url编码的form表单数据
       request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       //在send方法里面写表单数据
       request.send("name=aobama&age=29");
 }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

十七 Ajax&amp;JQuery

Ajax：

十七 Ajax&JQuery