Ajax

Ajax

文章目录

• • • Ajax
    • • 一.XMLHttpRequest对象
      • 二.向服务器发送请求:
      • 三.服务器响应
      • 四.onreadystatechange 事件

AJAX = Asynchronous JavaScript and XML
异步的 JavaScript 和 XML
与服务器交换数据

一.XMLHttpRequest对象

	XMLHttpRequest 对象 (异步的与服务器交换数据)
	XMLHttpRequest 用于在后台与服务器交换数据
	创建 XMLHttpRequest 对象:
		new XMLHttpRequest();

二.向服务器发送请求:

	XMLHttpRequest对象.open(method请求方式,url请求的url,async 同步还是异步)
	第一个参数:method：请求的类型；GET 或 POST....
	第二个参数:url：文件在服务器上的位置
	第三个参数:async：true（异步）或 false（同步）
	通过XMLHttpRequest对象.send()
	发送信息:在地址后?写信息，如?fname=Henry&lname=Ford

	setRequestHeader(header,value) 来添加 HTTP 头
		header: 规定头的名称,value: 规定头的值

	url:文件可以是任何类型的文件,比如 .txt 和 .xml
	XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true

	异步则:
	xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
       
    }
}

三.服务器响应

responseText获得字符串形式的响应数据
responseXML获得 XML 形式的响应数据:
	如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析

四.onreadystatechange 事件

	当readyState改变时,触发 onreadystatechange 事件
	在此事件中对于服务器响应的数据进行操作
	xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        满足条件执行这中的代码
    }
}

readyState:
	0: 请求未初始化
	1: 服务器连接已建立
	2: 请求已接收
	3: 请求处理中
	4: 请求已完成，且响应已就绪
	
status:
	状态码:200: "OK"
				404: 未找到页面

例如:

 //1.创建请求对象
  var xhr=new XMLHttpRequest();
  xhr.open('get','',true)//get:请求方式，true:表示异步操作
  //2.建立请求连接
  xhr.onreadystatechange=function () {
    if(xhr.readyState == 4 && xhr.status == 200){//如果请求成功
      console.log(JSON.parse(xhr.responseText))//获取请求结果
      var data=JSON.parse(xhr.responseText),txt='';
      for(var i=0;i<data.length;i++){
        txt+='<li>'+data[i].sname
      }
      document.getElementsByClassName('stu-list')[0].innerHTML=txt;
    }
  };
  //3.向后台发送请求
  xhr.send()