jquery ajax 使用心得,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发送请求需要如下几步

创建一个 XMLHttpRequest 请求对象

var httpRequest = new XMLHttpRequest();

准备发送

httpRequest.open('get', './php/01check.php?username=' + username + '&password=' + pwd, true)

发送请求

httpRequest.send(null);

指定回调函数

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 = '

'+ model.info + ' ' + model.message + '

';

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 = '

• 书名：' + data.bookname + '
• 作者：' + data

  .author + '

• 描述：' + data.desc + '

';

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)

属性jsonp

属性jsonpCallback

模板引擎

为何会有模板引擎

模板+数据->静态页面片段

流行的模板引擎

image.png

模板引擎artTemplate