07-Ajax[python]

一、Ajax简介

• 概念
  Ajax (阿贾克斯 Asynchronous Javascript And Xml ) 异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术, 可以访问服务器数据的局部刷新的技术. AJAX不是一种新的编程语言。

• Ajax作用
  允许客户端发送HTTP请求, 去异步请求服务器的数据来创建动态网页。
  异步获取数据，即是数据交互(通过ajax获取某一文本文件的内容)。

• Ajax核心
  Ajax 技术核心是JavaScript对象XMLHttpRequest(简称XHR)。

• 使用的场景
  a.在百度中进行关键字搜索，会提示相关的所有内容
  b.在账号注册的时候，其中某一项会直接提示错误

二、Ajax操作

• 创建对象XMLHttpRequest()
• open()方法
• send()
• request.onreadystatechange = function(){}

// 1、打开浏览器
// 创建一个ajax对象 ( ie6以下new ActiveXObject(‘Microsoft.XMLHTTP’) )
var request = null;
if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
} else {
    request = new ActiveXObject('Microsoft.XMLHTTP');
}

  // 2、在地址栏输入地址
  /*open方法
     参数一: 打开方法  get/post
     参数二: 请求地址
     参数三: 是否异步 (true异步: 非阻塞 / false同步: 阻塞)
  */
  request.open('get', '00-test.txt', true);

  // 3、提交请求(回车)
  request.send();

  // 4、等待服务器返回内容
  /**
  responseText: ajax请求返回的数据即存放在该属性下(都为字符串):
        readyState属性: 请求状态
        0: (初始化)还没有调用open()方法
        1: (载入)已调用send()方法，正在放请求
        2: (载入完成)send()方法完成，已收到全部响应内容
        3: (解析)正在解析响应
        4: (完成)响应内容解析完成，可以在客户端调用

        on readystate change: 当readyState改变的时触发
        
        status: 服务器状态，http状态码
         1字开头:  消息类
         2字开头: 成功类
         3字开头: 重定向类
         4字开头: 请求错误类
         5字开头: 服务器错误类
    */
request.onreadystatechange = function(){
        if(request.readyState == 4){
            if(request.status == 200){
                // 请求到数据，显示
                var oP = document.createElement('p');
                document.body.appendChild(oP);
                oP.innerHTML = request.responseText;
             } else {
                alert('错误了');
             }
        }
    }

三、同步、异步

• 同步：小店吃饭，小店老板厨师都是一个人

程序中：如果程序在下载数据，UI界面就无法响应；

• 异步：饭堂吃饭，收银台，打饭的，厨师，各自互不影响

程序中：异步下载数据和UI界面两个线程；

四、HTTP协议

HTTP协议：
HTTP是一个属于应用层的面向对象的网络协议, 由于其简捷,快速的方式, 适用于分布式超媒体信息系统。

HTTP协议的主要特点有: Client/Server模式， Brower/Server模式
1, 支持客户端/服务端模式. 即请求(request)-响应(response)模式, 必须先请求才能得到响应， 服务器不能通过http协议直接发送数据给客户端
2, 简单快速, 客户端向服务端发送请求时, 只需要传送请求方式和路径即可,所以简单, 由于HTTP协议简单, 使得HTTP服务器的程序规模小, 因而速度很快;
3, 灵活, 传输数据类型种类多
4, 无连接, 请求一次服务器后立刻断开连接, 即非长连接 即短连接
5, 无状态, HTTP协议对事务处理没有记忆能力; 【会话技术cookie、session】

HTTP协议的请求方式: get/post/options/head/put/delete/trace/connect/patch，但通常都是get和post，即常说的使用http的get或post请求。
HTTP包含: 请求头和请求体

• GET请求
  在Ajax使用的过程中，GET的使用频率又要比POST高得多. GET请求最常用于向服务器获取数据, 也可以将少量字符串参数提交给服务器。
  get请求：在请求URL后面以 ? 的形式跟上发给服务器的参数，多个参数之间用&隔开。

get请求地址: 
  http://193.112.122.210/study/login_get.php
参数说明:
  user 用户名
  password 密码
  
例如: 
  http://193.112.122.210/study/login_get.php?user=qingbuyaodianwo&password=123321

注：由于浏览器和服务器对URL长度有限制，因此在URL后面附带的参数是有限制的，通常不能通常不能超过1KB

• POST请求
  POST请求可以包含非常多的数据, 我们在使用表单提交的时候, 很多就是使用的POST传输方式。发给服务器的参数全部放在请求体(URL中看不到)中。

POST请求向服务器发送的数据, 不会跟在URL后面, 而是通过send()方法向服务器提交数据。
xhr.send('user =Zhang& password=123321');

POST请求和Web表单提交不同, 需要使用XHR来模仿表单提交
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

post请求地址:
  http://193.112.122.210/study/login_post.php

参数说明:
  user 用户名
  password 密码

    var request = null;
    try{
        request = new XMLHttpRequest();
    } catch(e) {
        request = new ActiveXObject('Microsoft.XMLHTTP');
    }
                    
    request.open('post', '  http://193.112.122.210/study/login_post.php', true);
    // 请求头,传输的数据类型(post默认是没有设置的)
    request.setRequestHeader('content-type','application/x-www-form-urlencoded');
    // 请求参数
    request.send('user=EndEvent& password=123321');
                    
    request.onreadystatechange = function(){
        if(request.readyState == 4){
            if(request.status == 200){
                alert(request.responseText);
            } else {
                alert('获取数据失败');
            }
        }
    };

注: post传递的数据量没有显示，这具体还得看服务器的处理能力。
注: 从性能上来讲POST请求比GET请求消耗更多一些, 用相同数据比较, GET比 POST快. 这也是我们GET请求的使用率大于POST的原因。

五、JOSN数据解析

JSON.parse()将一个符合JSON语法的字符串解析成一个对应类型的值或对象。

  // 转为JSON对象
  var dataSource = JSON.parse(request.responseText);

例如:
  http://193.112.122.210/json/JSON1.json

在线解析:
http://json.cn
http://tool.oschina.net/codeformat/json

六、jQuery-Ajax

• $.ajax()
  执行一个异步的HTTP（Ajax）的请求。

/*
 * 文档注释
 * type: HTTP的请求方式（get或post）， 默认是get
 * url: 接口， 必需
 * data: 参数（需要提交给服务器的数据）
 * async: 是否异步， 默认是true
 * success: 表示请求成功之后的响应
 * error: 表示请求失败之后的响应
*/

$(document).on('click', function(){
  $.ajax({
    type:"get",
    url:"http://193.112.122.210/study/login_get.php",
    data: {'user':'qingbuyaodianwo', 'password':'123321'},
    async:true,
    success: function(data){
      console.log(data)
    },
    error: function(err){
      console.log(err)
    }
  });
})

• $.get()
  使用一个HTTP GET请求从服务器加载数据。

语法: 
  jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
    url: 请求地址
    data: 发送给服务器的字符串或Key/value键值对
    success(data, textStatus, jqXHR): 当请求成功后执行的回调函数
    dataType: 从服务器返回的预期的数据类型。默认：智能判断（xml, json, script, or html）

$.get("http://193.112.122.210/json/JSON2.json", function(data){
  // console.log(data)
  var arr = JSON.parse(data)
})

注: http://193.112.122.210/json/JSON1.json
注: http://193.112.122.210/json/JSON2.json
注: 带参数时，可以拼接到url后面，也可以设置data对象。

jQuery中封装的get请求快捷方式。

• $.post()
  使用一个HTTP POST 请求从服务器加载数据。

语法:
  jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
    url: 请求地址
    data: 发送给服务器的字符串或Key/value键值对
    success(data, textStatus, jqXHR): 当请求成功后执行的回调函数
    dataType: 从服务器返回的预期的数据类型。默认：智能判断（xml, json, script, or html）

$.post("http://193.112.122.210/study/login_post.php", {"user":"zhangsan","password":"123321"}, function(data){
  //console.log(data)
  console.log("post")
})

jQuery中封装的post请求快捷方式。

七、实际案例

• 蘑菇街商品列表效果

默认第1页: http://193.112.122.210/study/getData.php
带参数page页码: http://193.112.122.210/study/getData.php?page=1
带参数page页码: http://193.112.122.210/study/getData.php?page=2

操作步骤:
  1、基本HTML(模拟页面显示)
  2、添加CSS样式
  3、通过ajax动态获取数据
  4、JSON数据解析
  5、DOM操作(渲染到页面中)

参考