AJAX概念
-
Asynchronous Javascript And XML（异步JavaScript和XML），
-
AJAX并不是一种语言，而是一种创建交互式网页应用的网页开发技术
-
AJAX是Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest 等技术的组合
-
使用XHTML+CSS来标准化呈现；
-
使用XML和XSLT进行数据交换及相关操作-json代替；
-
使用XMLHttpRequest对象与Web服务器进行异步数据通信；
-
使用Javascript操作Document Object Model进行动态显示及交互；
-
使用JavaScript绑定和处理所有数据
-
-
AJAX核心对象是XMLHttpRequest
AJAX优缺点
-
AJAX异步处理的优点
-
减轻服务器的负担，AJAX一般只从服务器获取只需要的数据。
-
无刷新页面更新，减少用户等待时间。
-
更好的客户体验，可以将一些服务器的工作转移到客户端完成，节约网络资源，提高用户体验
-
无平台限制
-
促进显示与数据相分离
-
-
AJAX异步处理的缺点
-
页面中存在大量js，给搜索引擎带来困难
-
AJAX干掉了Back和History功能，即对浏览器机制的破坏
-
存在跨域问题 域名
-
只能传输及接收utf-8编码数据
-
PHP基础
php环境的安装，使用xampp（Apache+MySQL+PHP+PERL）是一个功能强大的建站集成软件包。查看百度百科解释
使用英文官网地址下载：XAMPP Installers and Downloads for Apache Friends
ajax实现的是前后端交互，所以需要对应的后端语言作为支撑
PHP输出变量
-
echo 输出一个或者多个字符串
echo "Hello, world!"."<br />"; echo("你好"); -
print() 输出一个字符串
print("河南"); -
printf() 格式化输出语句
$age = 18; $weight = 77.5; printf("你好....%d, 体重 = %f"."<br>", $age, $weight); -
输出数组
print_r($age); // 索引(index)数组 $week = array("周一", "周二", "web"); // 关联数组 $per = array("name"=>"张三", "age"=>18, "sex"=>"男"); print_r($week); echo "<br />"; print_r($per); -
var_dump(): 输出数组和基本变量, 并能够将变量的类型输出出来
echo "<br />"; var_dump($week); echo "<br />"; var_dump($per); echo "<br />"; var_dump($age); echo "<br />"; var_dump($weight); echo "<br />"; echo "<br />"; echo "<br />"; echo "<br />"; echo "<br />";
变量的定义和输出
-
变量
1, 定义变量以$开头, 不用加 var
2, 变量名由数字, 字母, 下划线组成, 数字不能开头
3, 区分大小写
4, 见名知意
$age = 18;
$Age = 20;
echo $age."<br />".$Age."<br />";
$num;// 如果不赋初值结果是 NULL
var_dump($num);
echo "<br />";-
变量的赋值
// 1, 值赋值 $a = 3; $b = 5; $c = $a; echo $a.",".$b.",".$c."<br />"; $c = 100; echo $a.",".$b.",".$c."<br />"; // 2, 址赋值 $d = &$b; echo $a.",".$b.",".$d."<br />";// 3, 5, 5 $d = 100; echo $a.",".$b.",".$d."<br />";// 3, 5, 100 -
常量
常量定义语法:
* define(参数一, 参数二, 参数三)
* 参数一: 常量的名字
* 参数二: 常量的值
* 参数三: 布尔值, 是否区分大小写. true 代表不分区, false 代表区分. 默认值 false(一般使用默认值)
define("PI", 3.1415, TRUE); echo PI * 2; echo Pi * 2; echo pI * 2; echo pi * 2; echo "<br />";
函数
-
基础结构
function sum($a, $b) { return $a + $b; } echo sum(3, 5); -
定义函数, 交换两个变量的值
function changeNum(&$a, &$b) { $temp = $a; $a = $b; $b = $temp; echo $a.", ".$b;// 5, 3 } $aNum = 3; $bNum = 5; changeNum($aNum, $bNum); echo $aNum.", ".$bNum;// 5, 3
php的外部引入文件
// include, require, include_once, require_once都可以引入外部 php 文件.
include 与 include_once 的区别:
通过 include_once 引入外部文件, 无论引入多少次, 结果都只会引入一次;
通过 include 多次引入外部 php 文件, 会将外部 php 文件中的内容复制多次到当前页面中, 会造成代码冗余.
require 与 require_once 的区别:
与上述 include 与 include_once 的区别 相同.
include 与 require 的区别:
当通过 require 引入的外部文件中内容报错或者文件路径出错, 会影响到当前页面代码的执行;
而通过 include 引入不会影响当前页面代码的执行.接收传递过来的数据
// 获取前端post请求传递过来的数据
$user = $_POST["un"];
$pass = $_POST["ps"];
var_dump($pass); // 返回数据类型
if ($user == "123" && $pass == "123") {
echo "POST是咱的人";
} else {
echo "POST不是咱的人";
}AJAX实现步骤
-
初始化XMLHttpRequest对象
if (window.XMLHttpRequest) {// Mozilla, Safari, ... var http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE 5 ,6 var http_request = new ActiveXObject("Microsoft.XMLHTTP"); } -
XMLHttpRequest发出HTTP请求
http_request.open("GET|POST","test.php？username="+,false); http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //仅POST请求时需要设置 http_request.send(); -
XMLHttpRequest取得响应数据并显示
if(http_request.readyState==4 && http_request.status==200){ $("div").text(http_request.responseText) }
案例：向php请求数据，并返回请求内容
php文件内容
<?php
// 1.接收数据
$tel=$_GET['tel'];
// 2.判断数据,13409370012 18336396807
if($tel=='18336396807' || $tel=='13409370012'){
echo(0);// 电话号码已经存在
}else{
echo(1); //可以使用当前电话号码
}
// 3.返回数据
// 获取前端post请求传递过来的数据
?>案例：ajax请求数据，请求回来的数据格式为字符串
echo '{
"result_code": 200,
"result_msg": "OK",
"result_list": [
{
"patientName": "刘德华",
"age": 60,
"sex": "男",
"departmentname": "骨科",
"Inspectionitems": "血糖,甲状腺,心肺,肾脏"
},
{
"patientName": "马德华",
"age": 70,
"sex": "男",
"departmentname": "猪八戒",
"Inspectionitems": "血糖,甲状腺,心肺,肾脏"
},
{
"patientName": "唐僧",
"age": 60,
"sex": "男",
"departmentname": "骨科",
"Inspectionitems": "血糖,甲状腺,心肺,肾脏"
}
]
}';JSON
-
Javascript Object Notation,是一种轻量级的数据交换格式
-
JSON支持多种语言
-
格式
{key:value,key:value,.....} 对象格式 [{key:value,key:value,.....},{key:value,key:value,.....},......] 数组格式 -
PHP处理：
$json=json_encode($array) $array=json_decode($json)
-
JavaScript处理：
eval( '('+json+')' ) JSON.parse(json) json字符串转为json JSON.stringify json转为json字符串
跨域请求数据
什么是跨域
什么是跨域：跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制
什么是同域：协议, 域名, 端口号 完全一致, 是同域.
协议: http, https
域名: 一级域名, 二级域名, 三级域名
端口号: 8080, 443等
https://www.oa.ranyihang.com:8080 https://www.oa.ranyihang.com:8081 https://www.ranyihang.com:8080 http://www.oa.ranyihang.com:8080
如何解决跨域问题
解决跨域问题有三种方式：Jsonp，postMessage，CORS
前端：Jsonp
前端iframe中：postMessage
后端：CORS
数据地址
jsonp跨域
前端发送请求
后端配合回调函数
好处：
-
javascript 兼容性比较好
-
不需要服务器支持，直接在本地运行
缺点：
-
它只支持GET请求而不支持POST等其它类型的HTTP请求
-
它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
-
jsonp在调用失败的时候不会返回各种HTTP状态码。
-
安全性。万一假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的。那么结果是什么？所有调用这个 jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的
postMessage
postMessage 方式进行跨域是HTML 5新增的跨域技术
A页面
<input type="button" value="点击" id="oneBtn">
<iframe src="http://192.168.64.2/AJAX-1/03postMsgB.html" width="800" height="500" id="oneFrame"></iframe>B页面
<h1>你不努力, 没人替你坚强!</h1>
body {
background: lightblue;
}A页面添加跨域
var oneBtn = document.getElementById("oneBtn");
var oneiFrame= document.getElementById("oneFrame");
oneBtn.onclick = function() {
// 演示下面这行代码时, A页面时通过 XAMPP 中的 Apache服务器打开.
// 同域时, 可以直接在A页面, 修改 B页面的内容
oneiFrame.contentWindow.document.body.style.background = "red";
}
oneBtn.onclick = function() {
// postMessage
oneiFrame.contentWindow.postMessage("hello", "http://192.168.64.2/");
}B页面接收A界面传递的值
window.onmessage = function(event) {
var even = event || window.event;
// data 属性中存储的是其他页面通过 postMessage 传过来的值
console.log(even.data);
switch (even.data) {
case "hello":
document.body.style.background = "red";
break;
default:
break;
}
}CORS实现跨域请求
php页面配置请求内容
header('Access-Control-Allow-Origin:http://www.abc.com'); // 允许一个访问
header('Access-Control-Allow-Origin:*'); // 允许所有访问
echo '您已经访问成功';发送ajax请求
<input type="submit" id="inp"/>
<script>
var oInp=document.querySelector('#inp');
addEvent(oInp,'click',getMsg);
function getMsg(){
url='http://192.168.64.2/1.6/2.getCors.php';
ajaxPostAsyn(url,'',ok,error);
function ok(res){
console.log(res.responseText);
}
function error(){
console.log('error');
}
}
</script>
928
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
