Web开发 | Ajax 介绍 & 使用总结 (六)

Ajax介绍

Ajax最早产生于2005年，Ajax表示Asynchronous JavaScript and XML(异步JavaScript和XML)，但是它不是像HTML、JavaScript或CSS这样的一种“正式的”技术，它是表示一些技术的混合交互的一个术语（JavaScript、Web浏览器和Web服务器），它使我们可以获取和显示新的内容而不必载入一个新的Web页面。增强用户体验，更有桌面程序的感觉。

服务器环境配置

安装mamp（ mac apache mysql php ） 用于模拟服务器环境

• mac 操作系统 / win
• Apache 提供静态资源服务（html页面、js文件、css文件、图片。。。）
• MySQL 数据库
• php 编程语言，可以用来开发网站

静态网站

• 静态网页，通常是指纯粹用HTML格式的网页，他的文件扩展名为.htm、html、shtml等
• 静态网页的“静态”是指静态网页一经制成，内容就不会再变化，是一次性写好放在服务器上进行浏览的，如果想改动，必须在页面上修改，然后再上传服务器覆盖原来的页面

动态网站

• 动态网页的代码即使不改变，页面显示的内容却是可以随着时间、环境或者数据库操作的结果而发生变化。动态网页能与后台数据库进行交互、数据传递。文件扩展名以.aspx、.asp、.jsp、.php等形式为后缀;

Ajax 原生 Api 使用

使用Ajax发送请求需要如下几步

1. 创建一个 XMLHttpRequest 请求对象
   • var httpRequest = new XMLHttpRequest();
2. 准备发送
   • httpRequest.open('get', './php/01check.php?username=' + username + '&password=' + pwd, true)
3. 发送请求
   • httpRequest.send(null);
4. 指定回调函数
   • httpRequest.onreadystatechange = function () {}

$('#btn').click(function () {
     var username = $('#username').val();
     var pwd = $('#password').val();

    // 使用Ajax发送请求需要如下几步：
     // 1.创建一个 XMLHttpRequest 请求对象,原生 ajex
    var httpRequest = new XMLHttpRequest();

    // 2.准备发送
    // 参数1: 请求方式
    // 参数2: 请求 url
    // 参数3: 是否异步
httpRequest.open('get', './php/01check.php?username=' + username + '&password=' + pwd, true)

// 3.发送请求
httpRequest.send(null);

// 4.指定回调函数
httpRequest.onreadystatechange = function () {

if (httpRequest.readyState == 4) {
    if (httpRequest.status = 200) {
        var data = httpRequest.responseText;
        console.log(data);

        var info = document.getElementById('info');
        if (data == '1') {
            info.innerHTML = '登录成功';
        } else if (data == '2') {
            info.innerHTML = '用户名或者密码错误';
        }
    }
}
};
});

json转 模型对象

在回调函数获取的json 字符串,可以通过 JSON.parse(data),转为模型对象

// 获取回调数据
var data = httpRequest.responseText;    
// 数据转对象模型
var model = JSON.parse(data);

使用返回数据创建 节点,并添加到 页面指定位置

// 创建模板
var tag = '<div><span>'+ model.info + '</span><span>' + model.message + '</span></div>';
document.getElementById('info').innerHTML = tag;

使用 jQuery Ajax 请求

// 使用jQuery Ajax
$(function () {
    $('#btn').click(function () {
    
    var code = $('#code').val();
        $.ajax({
            type: 'post',
            url: './php/11.php',
            data: {
                code: code
                },
            dataType: 'json', //xml json text html script jsonp
            success: function (data) {
                var info = $('#info');
                if (data.flag == 0) {
                info.innerHTML = '没有这本书';
            } else {
                var tag = '<ul><li>书名：' + data.bookname + '</li><li>作者：' + data
                    .author + '</li><li>描述：' + data.desc + '</li></ul>';
                info.innerHTML = tag;
            }
            },
             error: function (data) {
                        console.dir(data);
                        $("#info").html("服务器发生错误，请与管理员联系");
                    }
     });
});
});

Ajax跨域

• 同源策略是浏览器的一种安全策略，所谓同源指的是请求URL地址中的协议、域名和端口都相同，只要其中之一不相同就是跨域
• 同源策略主要为了保证浏览器的安全性
• 在同源策略下，浏览器不允许Ajax跨域获取服务器数据

image.png

跨域解决方案

• jsonp
• document.domain+iframe
• location.hash + iframe
• window.name + iframe
• window.postMessage
• flash等第三方插件

JSONP原理

• 静态script标签的src属性进行跨域请求
• 动态创建script标签，通过标签的src属性发送请求

jQuery对jsonp的支持

• jQuery基本使用（$.ajax）
  1. 属性jsonp
  2. 属性jsonpCallback

模板引擎

• 为何会有模板引擎
• 模板+数据->静态页面片段
• 流行的模板引擎

image.png

模板引擎artTemplate

https://github.com/aui/artTemplate
https://aui.github.io/art-template/zh-cn/docs/