前端页面局部刷新之-AJAX

AJAX

• AJAX概念：百度百科-Ajax 简要来说就是：异步的js和xml 方便 局部刷新或异步请求
• Ajax具体使用方式如下：
• 原生AJAX:

`
//在数据请求时注意字符格式，request请求到后台时记得检验或者转换字符集
// 1. 创建异步请求对象
var request = new XMLHttpRequest();
// 2. 建立链接
request.open(“GET”,“url地址”) //request.open(“post”, “user.do?method=check” , false);
// 3. 发送数据
request.send(); //request.send(“username=”+username);
//如果使用的是post方法 需要加 request.setRequestHeader(“content-type”, “application/x-www-form-urlencoded”)
// 4. 监听响应
request.onreadystatechange=function()
{
// 是否请求成功
if(request.status=200 && request.readyState=4)
{
var ret=request.responseText;//接受服务器返回的参数
}
}

• Jquery 版ajax请求

• $.ajax({
  type:“get”, // 请求的类型
  url:“url地址”,
  async:true, // 是否异步
  success:function(res){ // 表示请求成功
  // res 表示响应
  console.log(res);//控制台输出res的内容
  //定义变量接收从后台传来的数据，由自己定义
  //var x = res.data.records[0].m_picture;
  //“img”).attr(‘src’,x);
  }
  });

`

• jQuery是一个javascript框架

• jQuery的特点：
  1.小巧，开源，免费
  2.功能强大
  3.实现浏览器的兼容

• jQuery文件
  可以从官网下载最新的jQuery.js文件。为了实现浏览器的普遍兼容，建议使用jQuery 1.*的版本。
  jQuery文件也可以使用其他网站提供的件。
  项目在开发阶段使用本地的jQuery.js文件，无压缩版本。
  项目上线后可以使用CDN上的js文件,压缩版本

• jQuery对象和DOM对象的区别:
  DOM对象是指通过原生的js代码获取的或创建的对象。也就是通过document对象获取。
  jQuery对象是指通过Jquery获取的或创建的对象。
  jQuery对象和DOM对象其实一个标签的两种身份。因此，身份不同，对应的方法就不同
  $()其实就是jQuery()的缩写

• jQuery扩展：

1. 插件机制：

   插件=组件+js
   组件=HTML+CSS*
   在jQuery中，本身提供了许多的方法。
   插件机制就可以扩展jQuery对象中的方法。

2. 插件机制中，包括如下几种扩展的方式：

   扩展jQuery对象的方法(重点)
   扩展全局方法（jQuery类的方法）
   扩展选择器
   如果是自定义的插件，通常命名为jquery.***.js

3. 扩展jQuery对象的方法

   方式1) $.fn.方法名称=function(){}
   方式2) $.fn.extend({方法名称1:function(){},方法名称2:function(){},})
   扩展全局方法（jQuery类的方法）
   jQuery.extend()
   扩展选择器
   $.expr()

4. 常用的jQuery插件

   jQueryUI插件，基于css和js的一个jQuery插件，把常见的页面模块进行封装。
   jQueryEasyUI插件，在前者基础上进行简化。
   jQueryMoblie插件，专门用于移动端的UI插件。

5. jQueryUI插件的使用

   1.下载
   2.导入相应的文件，jquery.js ,jQueryui.css, jquery-ui.js,
   3.根据API调用