Ajax，Jquery，Javascript的关系（一）

简单总结：

1、JS是一门前端语言。

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

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

关系：

jQuery与ajax都是js的一个框架，各有各的功能，若js是父亲的话，jquery与ajax就是两个儿子。

什么是Ajax：

Ajax的全称是：Asynchronous JavaScript And XML，指的是异步 JavaScript 及 XML（其实主要用的就是javascript技术），它不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。

Ajax的特点是异步，比如可以使用Ajax更新局部网页、使用Ajax在不刷新页面的情况下查询数据、验证用户注册的用户名是否唯一等。

组成：

　　　基于XHTML和CSS标准的表示；

使用Document Object Model进行动态显示和交互；

使用XML和XSLT做数据交互和操作；

使用XML HttpRequest与服务器进行异步通信；

使用JavaScript绑定一切。

XMLHttpRequest 对象可以在不刷新当前页面的情况下向服务器端发送异步请求，并接收服务器端的响应结果，从而实现局部更新当前页的功能，尽管名为XMLHttpRequest，但它并不限于和XML文档一起使用，它还可以接收 JSON 或 HTML 等格式的文档数据。

实现Ajax请求步骤：
    1、创建XMLHttpRequest核心对象
     var xhr = new XMLHttpRequest();
    2、准备请求/打开请求
     xhr.open(参数1,参数2,参数3);
      参数1：请求方式 GET请求|POST请求
      参数2：请求路径
      参数3：是否异步 true=异步|false=同步
      注：如果是GET请求，则如果有参数会直接跟在地址之后
    3、发送请求
     xhr.send(参数1);
      参数1：需要传递给服务器的数据
      如果是GET请求，则设置null
      如果是POST请求，有参数则设置参数，无参数则设置null
    4、如果请求方式是同步请求
      判断响应状态是否成功
       如果status==200，表示响应成功，得到响应结果
       xhr.responseText
       如果请求是异步请求
      监听readyState的值是否为4 （readyState：判断后台是否完全将数据成功）
       判断响应状态是否成功
        如果status==200，表示响应成功，得到响应结果
        xhr.responseText

什么是Jquery:

jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互

为什么用Jquery来实现Ajax?

传统使用Ajax特点：

步骤繁琐
方法、属性、常用值较多不好记忆
处理复杂结构的响应数据（如XML格式）比较烦琐
浏览器兼容问题

jQuery能大大简化JavaScript程序的编写

要使用jQuery，首先要在HTML代码最前面加上对jQuery库的引用，比如：

Google提供的

http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

jQuery官方的

http://code.jquery.com/jquery-1.6.min.js

JQuery使用：

"$"代表的是对JQuery对象的引用，所以$等同于JQuery

  DOM对象与Jquery包装集对象的互相转换
   DOM对象转Jquery对象：$(dom对象);
   Jquery对象转Dom对象：jquery对象[下标]

   当元素不存在时
    通过document获取的结果，为null
    通过jquery获取的结果，为空包装集，需要通过length来判断元素是否存在

选择器：

1.基础选择器：id ,元素，类，全选择，分组

2.层次选择器：后代，子代，相邻弟弟，同辈弟弟

3.表单选择器：input元素选择器，input表单选择器，获取所有的checkbox元素

4.其他选择器：属性选择器，过滤选择器

Ajax，Jquery，Javascript的关系（一）

猜你喜欢