ajax 异步的JavaScript 和 XML
它是创建交互式网页应用的网页开发技术
ajax是一种无需重新加载整个网页的情况下，进行网页局部刷新的牛逼技术
网络: 多台计算机（服务器）就可以形成一个网络
ip: 我们可以确定网络上服务器的地址 192.168.0.151
端口: 80 传输数据
----------------------------------------------------------------------------
ajax 核心概念 : 异步请求
同步和异步的一个区别:
其实就是阻塞和非阻塞
阻塞： 就是必须得等到别人回应我了以后，我才能继续去做其他的事情
非阻塞：就算我给别人发送了一个请求，数据传输过去，不管他是否给我响应，我会继续往下去执行
ajax 它不是一门语言，它就是一门技术！
网络请求方式： 有很多种 最常用的就是 post 、 get
ajax 同样也有着两个请求的方式 post get
---------------------------------------------------------------------------
创建ajax请求
最最核心的东西是: XMLHttpRequest
有两种创建方式可以创建ajax请求对象
1. XMLHttpRequest
ie7+ 谷歌 火狐 .....
2. ActiveXObject
ie5\ie6
var xmlhttp = null;
if(window.XMLHttpRequest){ // IE7+ 谷歌 火狐
xmlhttp = new XMLHttpRequest(); // 创建XMLHttpRequest对象
}else{ // ie5 ie6
xmlhttp = new ActiveXObject('Microsoft.XMLHttp'); // 创建请求对象
}
请求： open
1.设置请求方式
2.设置请求地址
3.设置它是同步还是异步
xmlhttp.open('get',"json/data.json",true);
发送请求: send
xmlhttp.send();
post请求需要传递参数：
xmlhttp.send(参数); // 'user=admin&password=123'
处理：
xmlhttp.onreadystatechange = function(){
// readyState 代表ajax的请求状态
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
// status HTTP 的状态码
// 200 响应成功
// 404 请求路径找不到
// 503 服务不可用
// 304 发送一次请求，在发送一次请求是按照前一次响应的数据来响应
console.log(xmlhttp.readyState,xmlhttp.status);
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
console.log('响应成功')
console.log(xmlhttp.readyState,xmlhttp.status);
}
}
返回结果：
有两种 responseText responseXML
responseText : txt json
responsXML : xml
post 和 get 的区别？
get: 它会把你提交的信息显示出来
不安全 用户登录
get 传输数据量比较小
post : 不会把你提交的信息显示
比get要安全
post 传输的数据量会大很多很多
什么时候用post或是get?
更趋向于有后台来决定 后台要你用get 你就用get 要你用post你就用post
---------------------------------------------------------------------------------------
ajax 请求txt文件？
var xmlhttp = null;
if(window.XMLHttpRequest){ // IE7+ 谷歌 火狐
xmlhttp = new XMLHttpRequest(); // 创建XMLHttpRequest对象
}else{ // ie5 ie6
xmlhttp = new ActiveXObject('Microsoft.XMLHttp'); // 创建请求对象
}
// open() 设置请求参数
// 请求方式
// 请求地址
// 同步还是异步
xmlhttp.open('get',"json/data.json",true);
// send() 发送请求
xmlhttp.send();
// xmlhttp onreadstatechange
xmlhttp.onreadystatechange = function(){
// readyState 代表ajax的请求状态
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
// status HTTP 的状态码
// 200 响应成功
// 404 请求路径找不到
// 503 服务不可用
// 304 发送一次请求，在发送一次请求是按照前一次响应的数据来响应
console.log(xmlhttp.readyState,xmlhttp.status);
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
console.log('响应成功')
console.log(xmlhttp.readyState,xmlhttp.status);
console.log(xmlhttp.responseText)
}
}
--------------------------------------------------------------------------------------
ajax 请求json文件?
var type = document.getElementById('type');
var type1 = document.getElementById('type1');
// 创建
var xmlhttp = null;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
}
// 设置一下参数
xmlhttp.open('get',"json/data.json",true);
// 响应
xmlhttp.onreadystatechange = function(){
// ajax 请求状态
// http 状态
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var txt = xmlhttp.responseText; // 返回的是字符串
// 转换为json
var json = JSON.parse(txt);
// 数据
var arr = json.ObjectType.option;
arr.forEach(function(e){
console.log(e);
var op = document.createElement('option');
op.innerHTML = e.text;
op.setAttribute("value",e.value);
type.appendChild(op);
})
type.onchange = function(){
var id = this.value;
var obj = null;
type1.innerHTML = "";
arr.forEach(function(e){
if(e.value == id){
obj = e.option;
return;
}
})
if(obj == undefined){
var op = document.createElement('option');
op.innerHTML = "--没有选项--";
type1.appendChild(op);
}else{
obj.forEach(function(e){
var op = document.createElement('option');
op.innerHTML = e.text;
op.setAttribute("value",e.value);
type1.appendChild(op);
})
}
}
type.onchange();
}
}
// 发送
xmlhttp.send()
----------------------------------------------------------------------------------
ajax 请求xml文件？
// 创建请求对象
var xmlhttp = null;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject('Microsoft.XMLHttp');
}
// 设置参数
xmlhttp.open('get',"xml/book.xml",true);
// 响应
xmlhttp.onreadystatechange = function(){
// ajax 请求状态 xmlhttp.readyState 4
// http 状态 xmlhttp.status 200
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
// 获取xml 返回的结果需要通过 responseXML
var xm = xmlhttp.responseXML;
console.log(xm);
// 操作xml和操作html很是类似
var names = xm.getElementsByTagName('name');
for(var i=0;i<names.length;i++){
var li = document.createElement('li');
li.innerHTML = names[i].innerHTML;
ul.appendChild(li);
}
}
}
// 发送
xmlhttp.send();
--------------------------------------------------------------------------------------
ajax 的封装
function ajax(method,uri,data,fun){ // 发送数据
// 创建请求对象
var xmlhttp = null;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
}
// 设置请求参数
xmlhttp.open(method,uri,true);
// 响应
xmlhttp.onreadystatechange = function(){
// ajax的状态
// http 状态
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var result = xmlhttp.responseXML ? xmlhttp.responseXML:xmlhttp.responseText;
fun(result);
}
}
// 发送
var sendstr = "";
for(x in data){
if(sendstr != ""){
sendstr += "&";
}
sendstr += x + "=" + data[x];
}
xmlhttp.send(sendstr);
}
网友评论