Ajax技术
ajax：一种创建交互式网页应用的网页开发技术
特点：局部刷新
优点：异步模式，提高用户体验；优化了浏览器与服务器之间的数据传输，减少不必要的数据往返，减少带宽占用
封装Ajax函数及详细介绍：
//obj为一个对象，属性有type(数据请求方式get、post),url(后台处理地址),data对象(存放向数据库发送的信息),success函数(对返回的数据进行处理的函数)
function ajax(obj){
//遍历boj对象中的data对象，进行字符串拼接
var str = "";
for(var attr in obj.data){
if(obj.data){
str += attr+"="+obj.data[attr]+"&";
}
}
//去除最后一个&符号（字符串截取或正则字符串替换）
//str = str.substring(0,str.length-1);
str.replace(/&$/,"");
//创建ajax对象
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else{
//IE6创建形式
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//判断get和post方法，进行不同的数据传送
if(obj.type.toUpperCase()=="GET"){
if(obj.data){
url = obj.url+"?"+str;
}else{
url = obj.url;
}
xhr.open("get",url,true);//true为异步处理
xhr.send();
}
if(obj.type.toUpperCase()=="POST"){
xhr.open("post",obj.url,true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(str);
}
//服务器响应监听，做出响应
xhr.onreadystatechange = function(){
//xhr.readyState==4表示响应就绪 xhr.status==200表示请求成功
if(xhr.readyState==4){
if(xhr.status==200){
obj.success(xhr.responseText);
}else{
alert("请重试");
}
}
}
}
/*
使用：ajax({
type:"post",
url:"text1.php",//请求数据处理并返回数据的后台地址
data:{"un"=username,"pw"=password},------un为name名，username为值
success:function(json){
//对返回的json数据的操作
}
})
* */跨域请求（jsonp）技术
主要受浏览器安全机制：同源策略限制（协议、域名IP、端口号相同）
原理：利用script标签的src属性不受同源策略限制这一特点，访问非同源数据。（需要后台配合：回调函数）；
举个获取百度搜索框搜索效果的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
baidu<input type="text" id="txt">
<ul id="list">
</ul>
<script type="text/javascript">
var oTxt = document.getElementById("txt");
var oList = document.getElementById("list");
oTxt.oninput = function(){
//创建script标签并将其src地址设置为接口地址，更改其中数据传输部分信息来获取该域下的信息
var oScript = document.createElement("script");
//wd后的值为向后台提供的数据；最终获取数据以回调函数aa的实参的形式被返回
oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+oTxt.value+"&cb=aa";
document.body.appendChild(oScript);
document.body.removeChild(oScript);
}
//定义aa函数对获得的数据data进行处理
function aa(data){
//获取的数据为对象，需要的数据为属性名s，所以需要提取有用信息
data = data.s;
var str = "";
data.forEach(function(item){
//将获取的数据以a标签形式插入li，并最终将所有li插入到ul列表中显示
str += `<li><a href="https://www.baidu.com/s?wd=${item}">${item}</a></li>`;
})
oList.innerHTML = str;
}
</script>
</body>
</html>