AJAX基础(三)

   一. $.ajax()方法概述

       作用:发送Ajax请求

 1  $.ajax({
 2      type: ‘get‘, //请求方式
 3      url: ‘http://www.example.com‘,//请求地址
 4      data: { name: ‘zhangsan‘, age: ‘20‘ },//或{data:‘name=zhangsan&age=20‘} //请求参数
 5      contentType: ‘application/x-www-form-urlencoded‘,//参数格式 也可以是{ontentType: ‘application/json‘},参数对应json字符串格式JSON.stringify({name: ‘zhangsan‘, age: ‘20‘})
 6      beforeSend: function () { 
 7          return false
 8      },
//请求成功后函数被调用
9 success: function (response) {},//方法内部会自动将json字符串转换为json对象 10 error: function (xhr) {} 11 });

     作用:发送jsonp请求

 1     $.ajax({
 2                 url: ‘/jsonp‘,
 3                 // 向服务器端传递函数名字的参数名称
 4                 jsonp: ‘cb‘,
 5                 jsonpCallback: ‘fn‘,
 6                 // 代表现在要发送的是jsonp请求
 7                 dataType: ‘jsonp‘,
 8                 success: function (response) {
 9                     console.log(response)
10                 }
11             })

 

   二.serialize方法

   作用:将表单中的数据自动拼接成字符串类型的参数

var params = $(‘#form‘).serialize();
// name=zhangsan&age=30

 

   三.$.get()、$.post()方法概述

 


   作用:$.get方法用于发送get请求,$.post方法用于发送post请求

  

$.get(‘http://www.example.com‘, {name: ‘zhangsan‘, age: 30}, function (response) {})

 

 $.post(‘http://www.example.com‘, {name: ‘lisi‘, age: 22}, function (response) {})

  

 四.jQuery中Ajax全局事件  

   1.全局事件

   只要页面中有Ajax请求被发送,对应的全局事件就会被触发
  .ajaxStart() // 当请求开始发送时触发
  .ajaxComplete() // 当请求完成时触发

   2.NProgress
   官宣:纳米级进度条,使用逼真的涓流动画来告诉用户正在发生的事情
   NProgress.start(); // 进度条开始运动
   NProgress.done(); // 进度条结束运动

   <link rel=‘stylesheet‘ href=‘nprogress.css‘/>
    <script src=‘nprogress.js‘></script>

1 // 当页面中有ajax请求发送时触发
2             $(document).on(‘ajaxStart‘, function () {
3                  NProgress.start() 
4             })
5 
6             // 当页面中有ajax请求完成时触发
7             $(document).on(‘ajaxComplete‘, function () {
8                 NProgress.done() 
9             })

 

   五.RESTful 风格的 API

      RESTful API 概述

 一套关于设计请求的规范

  1. GET: 获取数据
  2. POST: 添加数据
  3. PUT: 更新数据
  4. DELETE: 删除数据

       RESTful API 的实现

      AJAX基础(三)

    六.XML 基础

     XML是什么

       XML 的全称是 extensible markup language,代表可扩展标记语言,它的作用是传输和存储数据。

        XML DOM

       XML DOM 即 XML 文档对象模型,是 w3c 组织定义的一套操作 XML 文档对象的API。浏览器会将 XML 文档解析成文档对象模型

AJAX基础(三)

上一篇:三层架构与MVC


下一篇:ANT发布SVN WEB项目到TOMCAT以及利用post-commit自动提交编译更新