Ajax
2018-11-18 本文已影响0人
致自己_cb38
1、跨域：
- 域：域名协议端口一致的话就叫做同源。只要有一个不同，那么就是不同源。
- ajax不能请求不同源上的资源。就会产生跨域问题。
- 解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="ajax.js"></script>
<script>
function log(data){
console.log(data);
}
</script>
<script src="http://127.0.0.1/ajax3/kuayu.js"></script>
</body>
</html>
2、计算机组成原理：
- 进程:一个应用程序或者一个计算要完成的功能。一个应用有可能是多个进程。
- 进程调度：异步，CPU一个时间只能做一件事情。
- 线程：进程细化。时间化成碎片。
3、Ajax:传输存储数据（页面无刷新技术，JS通过URL加载数据，过程用户不可见）
Asynchronous Javascript And XML（异步 JavaScript 和 XML）
- 异步（true）：不同步，页面无刷新技术（同时做几件事）。
- 同步（false）：一件事完成再做另一件事（一步一步）。
4、JSON：轻量级数据交换格式
JSON对象与字符串相互转化
- 字符串转化对象
let obj = JSON.parse(str);
let obj = eval('('+str+')');
- 对象转化字符串
let obj = JSON.stringify(str);
5、Ajax步骤：
- 创建XMLHttpRequest对象
兼容
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObjext('microsoft.XMLHTTP');
}
- open 建立连接
- 发送信息
- 接受信息
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>获取</button>
<script>
document.querySelector('button').onclick=()=>{
//创建ajax对象(兼容)
let xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObjext('microsoft.XMLHTTP');
}
//建立连接
xhr.open('get','./1txt.txt?t='+Math.random(),true);
//发送数据
xhr.send(null);
//检测状态
xhr.onreadystatechange = ()=>{
//检测是否已经准备好
if(xhr.readyState==4){
//表示响应准备就绪
if((xhr.status>=200 && xhr.status<300)||xhr.status==304){
//请求成功之后的处理
alert(xhr.responseText);
}else{
//处理ajax返回异常的情形
}
}else{
//ajax请求失败的处理
}
};
}
</script>
</body>
</html>
6、获取XML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>获取</button>
<script>
document.querySelector('button').onclick=()=>{
//创建ajax对象
let xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObjext('microsoft.XMLHTTP');
}
//建立连接
xhr.open('get','./2xml.xml?t='+Math.random(),true);
//发送数据
xhr.send(null);
//检测状态
xhr.onreadystatechange = ()=>{
//检测是否已经准备好
if(xhr.readyState==4){
//表示响应准备就绪
if((xhr.status>=200 && xhr.status<300)||xhr.status==304){
//请求成功之后的处理
let re = createXml(xhr.responseText);
//console.log(xhr.responseXML);
}else{
//处理ajax返回异常的情形
}
}else{
//ajax请求失败的处理
}
};
}
//将XML字符串转化为对象
function createXml(str){
if(document.all){
var xmlDom=new ActiveXObject("Microsoft.XMLDOM")
xmlDom.loadXML(str);
return xmlDom
}else{
return new DOMParser().parseFromString(str, "text/xml");
}
}
</script>
</body>
</html>
7、获取POST
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="javascript:;">
用户名：<input type="text" name="user"><br><br>
密 码：<input type="password" name="password"><br><br>
</form>
<br><br>
<button>提交</button>
<script>
document.querySelector('button').onclick=()=>{
//创建ajax对象
let xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObjext('microsoft.XMLHTTP');
}
//建立连接
xhr.open('POST','4.php',true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送数据
let form = document.querySelector('form');
let data = 'user='+ form.user.value +'&password='+form.password.value ;
//console.log(data);
xhr.send(data);
//检测状态
xhr.onreadystatechange = ()=>{
//检测是否已经准备好
if(xhr.readyState==4){
//表示响应准备就绪
if((xhr.status>=200 && xhr.status<300)||xhr.status==304){
//请求成功之后的处理
let x = JSON.parse(xhr.responseText);
alert(x.message);
}else{
//处理ajax返回异常的情形
}
}else{
//ajax请求失败的处理
}
};
}
</script>
</body>
</html>
8、Ajax封装
function Ajax(type, url, data, success, failed){
// 创建ajax对象
let xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
type = type.toUpperCase(); //转化为大写
// 用于清除缓存
let random = Math.random(); //为了防止浏览器缓存
if(typeof data == 'object'){
var str = '';
for(var key in data){
str += key+'='+data[key]+'&';
}
data = str.replace(/&$/, '');
}
if(type == 'GET'){
if(data){
xhr.open('GET', url + '?' + data, true);
} else {
xhr.open('GET', url + '?t=' + random, true);
}
xhr.send(null);
} else if(type == 'POST'){
xhr.open('POST', url, true);
// 如果需要像 html 表单那样 POST 数据，请使用 setRequestHeader() 来添加 http 头。
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
// 处理返回数据
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if((xhr.status >= 200&&xhr.status<300)||xhr.status==304){
success(xhr.responseText);
} else {
if(failed){
failed(xhr.status);
}
}
}
}
}
9、三级联动使用ajax封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="javascript:;" id="form">
省：
<select name="sheng" id="sheng">
<option value="-1">请选择省份</option>
</select>
市：
<select name="shi" id="shi">
<option value="-1">请选择市</option>
</select>
区/县：
<select name="xian" id="xian">
<option value="-1">请选择区县</option>
</select>
</form>
</body>
<script src="ajax.js"></script>
<script>
let form = document.getElementById('form');
let sheng,shi;
Ajax('get','http://localhost/ajax3/city.json',null,success,error)
function success(jsondata){
json = JSON.parse(jsondata);
sheng = json.citylist;
for(let [index,obj] of json.citylist.entries()){
let option = document.createElement('option');
option.innerText = obj.p;
option.value=index;
form.sheng.appendChild(option);
}
}
function error(){
}
form.sheng.onchange=function(){
// 清除市和县，选择省后再加载
form.shi.innerHTML = '<option value="-1">请选择市</option>';
form.xian.innerHTML = '<option value="-1">请选择区县</option>';
//市的下标（关联区）
shi = sheng[this.value].c;
for(let [index,obj] of sheng[this.value].c.entries()){
let option = document.createElement('option');
option.innerText = obj.n;
option.value=index;
form.shi.appendChild(option);
}
};
form.shi.onchange = function(){
form.xian.innerHTML = '<option value="-1">请选择区县</option>';
for(let [index,obj] of shi[this.value].a.entries()){
let option = document.createElement('option');
option.innerText = obj.s;
option.value=index;
form.xian.appendChild(option);
}
};
</script>
</html>
