原生ajax基础

Posted 2020-08-16 X_Zed

/*
ajax对象的成员
常用属性:
responseText:以字符串形式接收服务器端返回的信息
responseXML:以Xml Document对象形式接收服务器返回的信息
readyState:返回当前请求的状态
0:刚创建ajax对象
1:已经调用open方法
2:已经调用send方法
3:已经返回部分数据
4:请求完成,数据返回完整
onreadystatechange:事件,当ajax状态readyState发生变化的时候要触发执行
【为了获得较多的状态,最好在创建好ajax对象后就设置
最多可以感知1/2/3/4 四种状态】
status:返回当前请求的http状态码【200--ok 304--请求缓存 404--没有此页面 403--禁止访问】
statusText:返回当前请求的响应行为码
常用方法;
open() 创建新的http请求
send() 把请求发送给服务端
abort() 取消当前请求
*/
1.创建ajax对象

主流浏览器方式
火狐、谷歌、苹果、Safari、Opera包括IE7以上版本的浏览器
var xhr = new XMLHttpRequest();

IE(6/7/8)方式
var xhr = new ActiveXObject("Microsoft.XMLHTTP");//最原始的方式
var xhr = new ActiveXObject("Msxml2.XMLHTTP");//升级
var xhr = new ActiveXObject("Msxml2.XMLHTTP.3.0");//升级
var xhr = new ActiveXObject("Msxml2.XMLHTTP.5.0");//升级
var xhr = new ActiveXObject("Msxml2.XMLHTTP.6.0");//IE维护的最高版本

2.发起对服务器的请求
//浏览器方式请求:打开浏览器,输入请求地址,敲回车发送请求

//给ajax设置事件,接收服务器端发来的请求
xhr.onreadystatechange = function(){
if(readyState==4){
console(xhl.responseText);
}
}

//创建新的http请求(并设置请求地址)
//open(请求方式get/post,url请求地址)
xhr.open("get","XX.php");

//发送请求
//send(get-null/post-给服务器传递的信息)
xhl.send(null);

3.
var nm = document.getElementById("username").value;
ajax的get请求需要注意两个地方
//xhr.open("get","xx.php?name="+nm+"&addr=beijing")
①在url地址后面以请求字符串(传递的get参数信息)形式传递数据
②对"中文"、=、&等特殊符号处理

//在php里边可以用函数urlencode()/urldecode()对特殊符号进行编码、反编码处理
//在javascript里面可以通过encodeURIComponent()对传递的特殊符号(例如:$、=等)进行编码处理
//同时对"中文"也会进行编码处理
nm = encodeURIComponent(nm);
encodeURIComponent()编码后的信息是%后接两个十六进制数

ajax的post请求需要注意的四个地方
//var info = "name="+nm+"&age=23";
//xhr.send(info);
①给服务器传递数据需要调用send(请求字符串数据)方法
//以下setRequestHeader()方法必须要在open()方法后调用
//xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
②调用方法setRequestHeader()把传递的数据组织为xml格式(模仿form表单传递数据)
③传递的中文信息无需编码,像&、=等仍需编码
④该方式请求的同时也可以传递get参数信息,同时使用$_GET接收该信息

5.同步、异步
ajax对象.open(方式 get/post , url地址 , [异步true]同步false);
ajax是可以与服务器进行(异步或同步)交互的技术之一。
异步:同一个时间点允许执行多个进程。
同步:同一个时间点只允许执行一个进程。

6.浏览器对动态程序文件缓存的处理解决:
① 给请求的地址设置随机数【推荐】
②给动态程序设置header头信息，禁止浏览器对其缓存

7.对xml的对象的接收和处理
ajax负责去服务器请求xml信息,使用responseXML属性接收
js里面的DOM技术负责处理xml信息(与处理html方式一致)
document/普通元素对象.getElementByTagName();

8.
//在JavaScript里边,把字符串"string"变为对象"object"
var obj = "{name:"kitty",age:5}";
//eval(字符串参数) 字符串参数变为表达式运行
eval("var cat ="+obj);//eval("var cat = {name:"kitty",age=5}")
console.log(cat);

9.FormData使用注意
①每个表单域必须有name属性
②不能设置setRequestHeader头
③特殊符号无需编码
④在form标签里边无需设置enctype="multipart/form-data"属性(即便有上传文件域也不需要设置)
(无刷新上传附件,FormData可以收集上传的文件域信息)

10.ajax对象->upload->onprogress
ajax对象有成员属性upload,其也是一个对象,该对象有onprogress属性。该属性是一个"事件"。该事件每间隔0.1秒就执行一次,执行的过程中会感知当前的附件上传情况,例如可以感知附件的"总大小",目前"已上传大小"等相关信息。