ajax

原生ajax [局部刷新技术]

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

ajax异步请求 主要用来请求数据
AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。
api ：远程地址或本地地址 程序应用集
请求远程服务器：
1.买域名
2.买一个网上远程服务器 有自己的公用ip
域名绑定公网ip 动态解析
装node 数据库 部署
http https协议 下载一个安全证书 里面有相关文件

java asp php nodejs 后端代码封装的
前端主要使用ajax 半动态项目

java 全动态
京东 半动态 前后端分离项目

XMLHttpRequest对象

XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest

如何使用ajax
1.实例化对象

var http=new XMLHttpRequest();

2.建立联系 open

open("method"，“url”,[asyncFlag],["username"],["password'])

建立对服务器的调用。method可以是get.post.put. url参数可以是相对url或绝对url.这个方法还包括3个可选的参数，是否异步，用户名，密码。

htttp.open("get","./list/data.txt ");

method:get获取数据 post新建 增加数据 put更新 修改删除数据
url 地址 远程 本地
async true flase 是否同步 默认为true 异步 false 同步
同步和异步的区别：等待请求完成之后 再去执行 异步是：请求和后续代码同时完成
username userpwd 用户判断
3.发送请求 send
里面的参数可写可不写 写向服务器传输数据 不写请求数据

http.send();

4.获取服务器响应的数据 使用事件
服务器开始响应
read state 读取的状态码 2 3 4

http.onreadystatechange=function(){
	if(http.readstate==4){
		//获取数据
		//http.response 数据
		responsetxt 字符串  读取出来时字符串
	}
}

五步法：
第一布：创建对象
第二步：打开
第三步：发送
第四步：建立事件
第五步：拿取数据

异步和同步

1.异步
异步情况下 外面的数据靠前 外面拿不到异步数据

var data=null;
var http=new XMLHttprequest();
http.open("get","./list/data,txt",true);
http.send();
function show(callback){
	http.onreadstatechange=function(){
		if(http.readystate==4&&http.status==200){
				callback(htttp.response);//括号内为callback的值  callback为回调函数
		}
	}
	show(function(data){
		//可以拿到数据
		console.log(data);//data的值是http.response
	});
}

2.同步
js是单线程的 主线程锁死拿不到数据

var data=null;
var http=new XMLHttprequest();
http.open("get","./list/data,txt",false);
http.send();
function show(callback){
	http.onreadstatechange=function(){
		if(http.readystate==4&&http.status==200){
				callback(htttp.response);//括号内为callback的值  callback为回调函数
		}
	}

ajax 方式有get post put

如何将原生ajax进行分装
function AJAX(obj){//做网络请求的时候，以对象形式传递进来
规定:obj里面包含属性有：
1.url
2.type—get还是 post
3.data–前端给后端传递的参数(前端传递的时候以"对象形式")
4.回调函数—success
5.回调函数—error
6.跨域的回调函数—callBack
7.后台接受回调函数的 key 值；

请求接口的时候需要方式 路径 方式 数据
get 方式传值 是在url路径之后以？的形式a=1&b=2&n=3
post 不在路径上写 send()上发送数据**

function  method(res,url,data,callback){
	var http=new XMLHttprequest();
	if(res=="get"){
		if(data){
			url+="?";
			url+=data;
		}
		http.open(res,url);
		htttp.send();
	}
	else{
		htttp.open(res,url);
		if(data){
			http.send(data);
		}
		else{
			http.send();
		}
	}
	http.onreadstatechannge=function(){
		if(http.readystate==4&&http.status==200){
			callback(JSON.parse(http.response));
		}
	}
}
method("get","./list/data.txt",null,function(data){
	console.log(data);
})

js里面的几种跨域方法和原理

js跨域是指通过js在不同的域之间进行数据传输或通信
协议(http https) +主机名称+端口号+文件
http://store.company.com:81/dir/etc.html
协议不同 端口不同 主机名称不同 会产生跨域
1.jsonp跨域 通过传递回调函数 来返回数据
在js中，我们直接用xmlhttprequest请求不同域上的数据时，是不可以的，但是，在页面上引入不同域上的js脚本确实可以的，jsonp真是利用这个特性来实现的。

给后台传递回调函数
2.src跨域

回调函数传给后台   callback回调函数  callback取其值为dosome
<scricpt src="http://127.0.0.1:8080/0616/user.php？callback=dosome"></script>//不报错 数据拿不到
<scricpt>
	function dosome(data){
		console.log(data);
	}
</script>
var http=new XMLHttpRequest();
http.open("post","http://127.0.0.1:8080/0616/user.php");
http.send();
http.onreadystatechange=function(){
	if(http.readystate==4&&http.status==200){
		console.log(JSON.parse(http.respnse));
	}
}
$cb=$ GET('clllback');
echo $cb.'('.json_encode($data).')';//输出执行结果

cross跨域
设置一个请求头 ()允许所有的都来访问
php 在里面配置一个（'Acess-Control-allow-origin:’）;

var http=new XMLHttpRequest();
http.open("post","http://127.0.0.1:8080/0616/insert.php");
http.send();
http.onreadystatechange=function(){
	if(http.readystate==4&&http.status==200){
		console.log(JSON.parse(http.respnse));
	}
}

百度搜索接口

https://www.baidu.com/s?&wd=
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?wd=&cb=