9月5号-总结-Ajax应用和Jquery介绍

Ajax 技术进阶实现

Ajax 关键代码的封装

第一步:封装AJax Get请求，关键代码分析如下：

function doAjaxGet(url,params,callback){ //1.创建XmlHttpRequest对象  var xhr=new XMLHttpRequest(); //2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程(例如连接是否建立，请求是否在处理，响应是否已产生) xhr.onreadystatechange=function(){//callback(回调函数)  //基于xhr对象获取的通讯状态，对响应数据进行处理

 //readyState状态说明

 //0：未初始化，尚未调用open() 方法

 //1：启动。已经调用open() 方法，但尚未调用send() 方法

 //2：发送。已经调用send() 方法，但尚未接收到响应

 //3：接收。已经接收到部分响应

 //4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了

 if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了  //服务端响应的结果会传递给XHR对象，我们可以借助responseText获取响应结果 callback(xhr.responseText);  
         }  
     } //3.创建与服务端的连接 xhr.open("GET",url+"?"+params,true);//true表示异步  //4.发送请求 xhr.send(null); //Get请求，send方法不传内容  //5.对响应结果进行处理(在回调函数中处理)。  
}

第二步:封装AJax Post请求，关键代码分析如下：

function doAjaxPost(url,params,callback){ //1.创建XmlHttpRequest对象 var xhr=new XMLHttpRequest(); //2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程. xhr.onreadystatechange=function(){//callback(回调函数)  //基于xhr对象获取的通讯状态，对响应数据进行处理  if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了  //服务端响应的结果会传递给XHR对象，  //我们可以借助xhr.responseText获取响应结果 callback(xhr.responseText);  
                 }  
         } //3.创建与服务端的连接 xhr.open("POST",url,true);//true表示异步 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //4.发送请求 xhr.send(params); //post请求将参数写到send方法  //5.对响应结果进行处理(在回调函数中处理)。  
}

第三步:在业务方法中应用封装好的代码,例如:

保存业务的关键客户端代码分析及实现.

 function doSave(){ //1.定义请求url var url="doSave"; //2.定义请求参数 var params="name="+document.forms[0].name.value; //3.发送异步的post请求 doAjaxPost(url,params,function(result){  
                   document.getElementById("result").innerHTML=result;  
           })  
    }

检查名字是否存在的关键客户端代码实现

function doCheck(){//在此函数中向服务端发起异步请求,检测name是否存在  //1.定义请求url var url="doCheck"; //2.定义请求参数 var name=document.forms[0].name.value;  
        var params="name="+name; //3.发送异步Get请求 doAjaxGet(url,params,function(result){  
                document.getElementById("result").innerHTML=result;  
        })  
    }

Ajax 编程框架基本实现(了解)

我们在实际的js编程中经常会以面向对象的方式进行实现，例如2.3章节中doAjaxGet函数如何以对象方法进行应用呢？关键代码分析如下：

(function(){ //定义一个函数，可以将其连接为java中的类 var ajax=function(){} //在变量ajax指向的类中添加成员，例如doAjaxGet函数，doAjaxPost函数 ajax.prototype={  
           doAjaxGet:function(url,params,callback){ //创建XMLHttpRequest对象，基于此对象发送请求 var xhr=new XMLHttpRequest(); //设置状态监听(监听客户端与服务端通讯的状态) xhr.onreadystatechange=function(){//回调函数，事件处理函数  if(xhr.readyState==4&&xhr.status==200){ //console.log(xhr.responseText); callback(xhr.responseText);//jsonStr }  
                      }; //建立连接(请求方式为Get,请求url,异步还是同步-true表示异步) xhr.open("GET",url+"?"+params,true); //发送请求 xhr.send(null);//GET请求send方法不写内容 },  
  
              doAjaxPost:function(url,params,callback){ //创建XMLHttpRequest对象，基于此对象发送请求 var xhr=new XMLHttpRequest(); //设置状态监听(监听客户端与服务端通讯的状态) xhr.onreadystatechange=function(){//回调函数，事件处理函数  if(xhr.readyState==4&&xhr.status==200){ //console.log(xhr.responseText); callback(xhr.responseText);//jsonStr }  
                      }; //建立连接(请求方式为POST,请求url,异步还是同步-true表示异步) xhr.open("POST",url,true); //post请求传参时必须设置此请求头 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //发送请求 xhr.send(params);//post请求send方法中传递参数 }  
        }  
        window.Ajax=new ajax();  
})()

Ajax 技术在Jquery中应用

Jquery 简介

jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

get函数应用,代码如下

//向服务端发送Ajax Get 请求 function doGet(){ //1.定义请求的url var url="doAjaxGet"; //2.定义请求的参数 var params="msg=hello jquery ajax get"; //3.发送异步Get请求  //这里的$符号为jQuery中的一个对象  //get(url[,params][,callback][,dataType])为jquery中的一个ajax函数 $.get(url,params,function(result){ //document.getElementById("result").innerHTML=result; $("#result").html(result);  
             },"text");//在这个函数中你看到ajax的代码了吗? }

post函数应用,代码如下

//向服务端发送Ajax Post 请求 function doPost(){ //1.定义请求的url var url="doAjaxPost"; //2.定义请求的参数 var params="msg=hello jquery ajax Post"; //3.发送异步POST请求  //这里的$符号为jQuery中的一个对象  //post(url[,params][,callback][,dataType])为jquery中的一个ajax函数 $.post(url,params,function(result){//post请求一般用于向服务端提交数据 $("#result").html(result);  
             });//在这个函数中你看到ajax的代码了吗? }

ajax函数应用

//向服务端发送Ajax Post 请求 function doAjax(){ //1.定义请求的url var url="doAjaxGet"; //2.定义请求的参数 var params="msg=hello jquery ajax request"; //3.发送异步Get请求  //这里的$符号为jQuery中的一个对象 $.ajax({  
                     type:"GET",//表示get请求(默认为get),省略不写为Get url:url,//":"左边的内容为语法定义,我们不能修改.":"右边为我们自己定义 data:params,//请求参数 async:true,//true表示异步 success:function(result){ //回调函数 $("#result").html(result);  
                     }  
             });//在这个函数中你看到ajax的代码了吗? }

load函数应用

function doLoad(){ //1.定义请求的url var url="doAjaxGet"; //2.定义请求的参数 var params="msg=hello jquery ajax request"; //3.发送异步Get请求  //在指定位置异步加载url对象的资源,  //在当前应用中表示把url对象的资源呈现到#result位置.  //$("#result").load(url,params,function(){//回调函数,资源加载完成执行此函数  //  console.log("load complete");  //}); $("#result").load(url);//假如不向服务端传值,不需要处理load完以后的结果,还可以这样写 }