持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情
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
数据地址
百度数据地址：sp0.baidu.com/5a1Fazu8AA5…
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>
