JavaScript、jQuery与Ajax的关系

原文链接

简单总结：

1. javascript是一种在客户端执行的脚本语言。ajax是基于javascript的一种技术，它主要用途是提供异步刷新（只刷新页面的一部分，而不是整个页面都刷新）,Ajax是利用了一系列相关的技术其中就包括javascript。一个是语言,一个是技术,两者有本质区别

2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新

3、jQuery是一个框架，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便

JavaScript可以做什么

用JavaScript可以做很多事情，使网页更具交互性，给站点的用户提供更好,更令人兴奋的体验

使用JavaScript来确保用户以表单形式输入有效的信息，这可以节省你的业务时间和开支

使用JavaScript，根据用户的操作可以创建定制的HTML页面

JavaScript还可以处理表单，设置cookie，即时构建HTML页面以及创建基于Web的应用程序

JavaScript是一种客户端语言。（实际上，也存有服务器端实现的JavaScript版本）。也就是说，设计它的目的是在用户的机器上执行任务，而不是在服务器上。因此，JavaScript有一些固有的限制，这些限制主要出于如下安全原因：

1.JavaScript不允许读写客户机器上的文件。这是有好处的，因为你肯定不希望网页能够读取自己硬盘上的文件，或者能够将病毒写入硬盘，或者能够操作你的计算机上的文件。唯一的例外是，JavaScript可以写到浏览器的cookie文件，但是也有一些限制

2.JavaScript不允许写服务器机器上的文件。尽管写服务器上的文件在许多方面是很方便的（比如存储页面点击数或用户填写表单的数据），但是JavaScript不允许这么做。相反，需要用服务器上的一个程序处理和存储这些数据。这个程序可以是Perl或者PHP等语言编写的CGI运行在服务器上的程序或者Java程序

3.JavaScript不能关闭不是它自己打开的窗口。这是为了避免一个站点关闭其他任何站点的窗口，从而独占浏览器

4.JavaScript不能从来自另一个服务器的已经打开的网页中读取信息。换句话说，网页不能读取已经打开的其它窗口中的信息，因此无法探查访问这个站点冲浪者还在访问其它哪些站点

Ajax是什么

Ajax是一种创建交互式web应用程序的方式。Ajax是ASynchronouS JavaScript and XML(异步JavaScript和xml)的缩写，这个词是由web开发人员JeSSe JameS Garrett在2005年年初首创的。严格地说，Ajax只是JavaScript的一小部分（尽管这一部分特别流行）。但是，随着频繁的使用，这个词不再指某种技术本身（比如Java或JavaScript）

在大多数情况下，Ajax一般是指以下这些技术的组合:

XMTML；

CSS（CaScading Style Sheet，层叠样式表）；

使用JavaScript访问的DOM（Document Object Model，文档对象模型）；

XML，这是在服务器和客户端之间传输的数据格式；

XMLHttpRequeSt,用来从服务器获取数据。

Ajax的好处

应用程序的大多数处理在用户的浏览器中发生，而且对服务器的数据请求往往很短。所以可以使用Ajax建立功能丰富的应用程序，这些应用程序依赖基于web的数据，但是其性能远远超过老式的，因为老式方法要求服务器传回整个HTML页面来响应用户操作。
一些公司已经在Ajax方面投入大量资金，尤其是Google。Google已经建立了几个著名的Ajax应用程序，包括Gmail（基于web的电子邮件），Google calendar，Google docS和Google mapS。另外一个大型的Ajax支持者Yahoo！，它使用Ajax增强个性化的MY Yahoo门户，Yahoo首页，Yahoo Mail，等等。这两家公司都向公众开放了其web应用程序的接口，人们可以使用这些程序会获得地图并且在地图上加上有意思，有用或者好玩的信息。

1、JavaScript

定义：

javaScript的简写形式就是JS，是由Netscape公司开发的一种脚本语言，一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能（其编写的程序可以被嵌入到HTML或XML页面中，并直接在浏览器中解释执行）。

组成部分：

核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM)
描述：
Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地使用于Internet网页制作上。
Javascript是由 Netscape公司开发的一种脚本语言（scripting language），或者称为描述语言。在HTML基础上，使用Javascript可以开发交互式Web网页。
Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。
Javascript短小精悍，又是在客户机上执行的，大大提高了网页的浏览速度和交互能力。同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。
主流的javaScript框架有：YUI ,Dojo，Prototype，jQuery...

2、Ajax

定义：

AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。
AJAX不是一个技术，它实际上是几种技术，每种技术都有其独特之处，合在一起就成了一个功能强大的新技术。
组成：
基于XHTML和CSS标准的表示；
使用Document Object Model进行动态显示和交互；
使用XML和XSLT做数据交互和操作；
使用XML HttpRequest与服务器进行异步通信；
使用JavaScript绑定一切。
描述：
Ajax是结合了Java技术、XML以及JavaScript等编程技术，可以让开发人员构建基于Java技术的Web应用，并打破了使用页面重载的管理。
Ajax技术使用非同步的HTTP请求，在Browser和Web Server之间传递数据，使Browser只更新部分网页内容而不重新载入整个网页.
Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

3、jQuery

定义：

jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
特点：
轻量级、链式语法、CSS1-3选择器、跨浏览器、简单、易扩展；
jQuery是一种独立于服务器端代码的框架，独立于ASP.NET或者JAVA；
jQuery是当前很流行的一个JavaScript框架，使用类似于CSS的选择器，可以方便的操作HTML元素，拥有很好的可扩展性，拥有不少插件。
描述：
对于程序员来说，简化javascript和ajax编程，能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。
对于用户来说，改善了页面的视觉效果，增强了与页面的交互性，体验更绚丽的网页物资。
javaScript框架实际上是一系列工具和函数

对于键名为数字或者非正常变量字符时（如有空格），必须使用obj[xx]方式获取值不能用.的格式

jquery中ajax调用json数据的使用说明

$.get()和$.post()这两个方法基本都一样使用，所以只说$.post()

情形1： $.post("url",function);此时返回的数据没有处理，所以不是json格式

情形2：$.post("url",function, "json");此时虽然指定了返回的数据为json格式，但实际上却不是！

情形3：$.post("url",{},function);此时传入的参数为空，没有指定返回的数据格式，所以也不是json格式

情形4：$.post("url",{},function, "json");正确的返回了json格式的数据

要点：当要把返回的数据当做json格式来处理，必须传入参数（参数为空就写成{}），并且还得指定返回类型为"json"

$.ajax({ 
    url:"url", 
    dataType:"json", 
    type:"get" 
    success:function 
}) 

要点：要指定dataType为"json"，此时无论是get还是post方式都会得到json格式数据，但我建议为了和上面的两个方法保持一致，最好加上data:{}这个条件

$.getJSON("url",function) 

要点：以get的方式得到json格式数据，是$.get()的方便写法

jQuery Ajax用法详解

jQuery Ajax在web应用开发中很常用，它主要包括有ajax,get,post,load,getscript等这几种常用无刷新操作方法，处理复杂的ajax请求时，jQuery使用jQuery.ajax()方法进行处理

在jQuery中有一些简单的方法，它对jQuery.ajax()方法进行了封装，使得我们在处理一些简单的Ajax事件时，不需要使用jQuery.ajax()方法

以下5个方法执行一般Ajax请求的简短形式，在处理复杂的Ajax请求时应该使用jQuery.ajax().

1.load(url,[data],[callback]):载入远程HTML文件代码并插入至DOM中，默认使用GET方式，传递参数时自动转换为POST方式

url:要载入的远程url地址

data:发送至服务器的key/value 数据

callback:载入成功时的回调函数

//无参数、无回调函数
$("#showload").load("load.htm");
//无回调函数
$("#showload").load("load.htm", { "para": "para-value" });
$("#showload").load("load.htm", { "para": "para-value" },
    function() {
        //处理
    }
)

这里将显示加载的文件的内容Load

2.jQuery.get(url, [data], [callback]):使用get方式从服务器端获取数据

url:发送请求的URL地址

data:要发送给服务器的数据

callback:载入成功时回调函数

$.get("jqueryget.htm", { "id": this.id },
    function(req) {        
        $("#showget").html(req);//成功时的回调方法
    });
})

使用$.get()方法，通过传递id来获取不同的logo。值得一提的是，此时是通过get方法获得请求，所以在获取参数值时要使用Request.QueryString

3.百度logo谷歌logo:这里将显示logo3.jQuery.post(url, [data], [callback])

使用POST方式来进行异步请求，同jQuery.get()相比，差别在于请求的方式，所以这里不做特别的说明，使用方法同jQuery.get()相似

4.jQuery.getScript(url,[callback])：通过 GET 方式请求载入并执行一个JavaScript文件。这个技术在前边文章中已经提到过，也是jQuery.ajax的一种简单的使用方法

5.jQuery.getJSON(url,[data],[callback])：通过get方式获取json格式的数据

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(req) {
    $.each(req.items, function(i, item) {
        if (i == vnum) {
            $("<img src="" + item.media.m + "" title="" + item.title + "" />").appendTo("#showjson");
        }
    });
});

同样的，这也是jQuery.ajax()方法的一种简写方法，代码如下：

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

6.jQuery.ajax():使用jQuery.ajax()方法获取数据

下边给个常用写法，并做了相应的注释:

$.ajax({
    url: "http://www.aaa.com",    //请求的url地址,也可以拼接。例如：http://www.aaa.com?password2='+password2,  
    dataType: "json",   //返回格式为json
    async: true, //请求是否异步，默认为异步，这也是ajax重要特性
    data: { "id": "value" },    //参数值
    type: "GET",   //请求方式
    cache:false,  //是否从缓存中获取数据
    beforeSend: function() {
        //请求前的处理
    },
    success: function(data) {//请求成功时处理
        if(data.msg =="true" ){  
            // view("修改成功！");  
            alert("修改成功！");  
            window.location.reload();  
        }else{  
            view(data.msg);  
        }  
    },
    complete: function() {
        //请求完成的处理
    },
    error: function() {//请求出错处理
        alert("异常！"); 
    }
});

自定义函数名

可以在传递过程中自定义函数名，只要使用jsonpCallback参数就可以了

jsonp:表示传递的参数，默认为callback，我们也可以自定义，服务器端通过此参数，获取自定义的函数名称，服务器这样获取 Request.QueryString["callback"]

jsonpCallback表示传递的参数值，也就是回调的函数名称，这是自定义的名称

无参数的方法调用

$(function() {     
    $("#btnOK").click(function() {     
        $.ajax({                    
            type: "Post", //要用post方式                    
            url: "Demo.aspx/SayHello",  //方法所在页面和方法名               
            data: "{}",   //没有参数也一定要传一个空参数
            contentType: "application/json; charset=utf-8",     
            dataType: "json",     
            success: function(data) {                     
                alert(data.d);  //返回的数据用data.d获取内容        
            },     
            error: function(err) {     
                alert(err);     
            }     
        });                  
        return false;   //禁用按钮的提交   
    });     
}); 

有参数的方法调用

$(function() {     
    $("#btnOK").click(function() {     
        $.ajax({     
            type: "Post",     
            url: "demo.aspx/GetStr",                      
            data: "{'str':'我是','str2':'XXX'}",  //方法传参的写法一定要对
            contentType: "application/json; charset=utf-8",     
            dataType: "json",     
            success: function(data) {                     
                  alert(data.d);   //返回的数据用data.d获取内容        
            },     
            error: function(err) {     
                alert(err);     
            }     
        });   
        return false; //禁用按钮的提交    
    });     
}); 

返回数组方法

$(function() {     
    $("#btnOK").click(function() {     
        $.ajax({     
            type: "Post",     
            url: "demo.aspx/GetArray",     
            contentType: "application/json; charset=utf-8", //在Http协议消息头中，使用Content-Type来表示具体请求中的媒体类型信息    
            dataType: "json",     
            success: function(data) {
                $("#list").html("");  //插入前先清空ul                           
                $(data.d).each(function() {     //递归获取数据                   
                    $("#list").append("<li>" + this + "</li>");  //插入结果到li里面    
                });     

                alert(data.d);     
            },     
            error: function(err) {     
                alert(err);     
            }     
        }); 

        return false;  //禁用按钮的提交       
    });     
});