请选择 进入手机版 | 继续访问电脑版

ajax理解

2018-12-6 09:44
1020
一、Ajax简介

Ajax 即“Asynchronous Javascript And XML“(异步的 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。Ajax 是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。—— ajax(Ajax 开发)_百度百科
二、XMLHttpRequest(XHR):

在JavaScript中,实现Ajax的异步更新的核心是XMLHttpRequest对象。通过这个对象,JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果。下面简要介绍这个对象的使用方法:
1. 发送请求
    open(method,url,async); 第一个参数时方法,即get或post,url时发送请求的地址,async则是指定了是否使用异步请求(true或false)send(string); 一般用get方法时string为空,用post方法时则填写要发送的数据
ajax理解-1.jpg
2. 取得响应
取得响应的几个方法(获得何种类型的响应值)
ajax理解-2.jpg
监听服务器对请求的响应:readyState属性
ajax理解-3.jpg
一个简单的示例:
  1. [/code][b]jQuery使用Ajax:[/b]
  2. [b]jQuery.ajax([setting]): setting的几个选项如下[/b]
  3. ajax理解-4.jpg
  4. [code]
复制代码
上面的例子定义了dataType为json,则返回的数据会自动转换为json对象,可直接按照json对象进行方法调用等操作。
三、PHP处理Ajax请求
  1. [/code]PHP编写的后台程序可以用 [b]$_SERVER["REQUEST_METHOD"] [/b]这个超全局变量来判定请求是GET请求还是POST请求,进而进行一些操作:
  2. [code]
复制代码
四、JSON(JavaScript object Notation)

1、键值对的形式组织数据
    键值对组合,键写在前面(放在双引号中),值写在后面,键和值用冒号分隔,例如:"name":"yao";json的值支持 数字(整型、浮点型),字符串,逻辑值(true/false),数组(在方括号[]中),对象(在花括号{}中),null
举例:键值staff,其值为数组,而数组中包含3个对象,如下。
  1. [/code]
  2. 2、JavaScript解析JSON
  3. [list]eval方法
  4. [/list][code]
复制代码
    JSON.parse()
  1. [/code]推荐JSON.parse()解析json数据,因为eval存在安全问题,eval方法会执行json中存在的方法,此时如果插入恶意代码,则用eval解析时可能会执行这段json代码, 而JSON.parse()不允许json数据中带有方法,因此具有一定的安全性。
  2. 例如
  3. [code]
复制代码
json解析、格式化和校验工具,Ajax全接触教程-慕课网
json校验工具(判断json数据的书写格式是否正确)—— The JSON Validator
五、处理跨域问题

ajax理解-5.jpg
不同域的例子:
ajax理解-6.jpg
JavaScript遵循同源策略,因此不支持直接跨域访问资源,因此需要利用其它的方法来实现资源的跨域访问。
1、jsonp
jquery使用jsonp
  1. [/code]此时后台PHP代码获取jsonp的请求应写为
  2. [code]
复制代码
2、HTML5新特性 XHR2
需要再服务端进行修改,此时添加
[code][/code]然后后台服务代码可以不做改动,就可以实现跨域访问了

参考教程

Ajax全接触-慕课网​www.imooc.com ajax理解-7.jpg
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|翁笔

© 2001-2018 Wengbi.com

返回顶部