Javascript之ajax部分理解

Javascript之ajax部分理解

**from表单传值：

**
提交等于发生了跳转

缺点：
等于是对整个页面的重新加载，性能受影响。并且提交后原有输入框中输入的值会消失。

Ajax：

ajax模拟的是局部的form表单传值。
无刷新提交，异步
异步Javascript和XML是指一种创建交互式网页应用型技术。

缺点：
容易出现回调地狱

单页面应用：
只有一个web页面，交换的是内容和数据

异步：
把耗时操作放入队列，继续执行剩余操作，传输数据

特性：
可同步可异步

作用：
传输数据

Javascript原生中使用方法：

let xhr= new XMLHttpRequest(); //兼容ie6及以上
 xhr.onreadystatechange=function(){
	if(xhr.readyState===4){
		alert(xhr.responseText);
	}
}
xhr.open('get','01.txt',true);
xhr.send();

ie6以下用ActiveXObject：

var xhr=null;
if(XMLHttpRequest){
	var xhr = new XMLHttpRequest();
}else{
	xhr = new ActiveXObject("Microsfot.XMLHttp");
}

注：

if(window.XMLHttpRequest){ //不写window也不会报错
	xhr = XMLHttpRequest();
}

上面的代码中为什么要写window?
ie4中不写window会报错，认为没有这个对象。加了window，ie4会默认去查找window下的对象，就不会报错。

这种写法更为严谨
虽然ie4已经不用，但如果有攻击者使用ie4攻击你的网页，就可能会出问题

区别：
post能设置缓存，get则不能
get理论上只能传输255个字节下的内容
get安全性低，性能快，常用于查询
传值方法：

get：
get中参数和地址用？拼接 &连接
例如：

www.baidu.com?username=wang&pwd=123

post：
在Hearders中

区别：
post能设置缓存，get则不能
get理论上只能传输255个字节下的内容
get安全性低，性能快，常用于查询

注：
深层来说，两者本质上没区别。Http基于Tcp，get与post都基于Tcp（可靠协议）。
get一次能传1个Tcp的包，post一次能传2个Tcp的包。

open()

参数：

方法：
get
post

路径：
请求地址

是否异步：
true异步
false同步

例：

xhr.open('get','01.txt',true);

以下举个简单的同步与异步的例子：

  xhr.open('get','01.txt',true); //false为同步
  xhr.send();
  alert(xhr.responseText)

如果返回XML格式返回值为：

xhr.responseXML

同步会一步步按序执行，最后弹出alert。

异步的话，执行到open传参会将其放入队列，先执行alert,执行完所有之后，在执行队列，所以这里的alert输出的值为空。

绑定事件：

xhr.onreadychange=function(){};

Aajax对象中有一个readyState属性来确定执行到了哪一步。但你无法确定readyState什么时候改变。所以用onreadychange事件在发生改变时做判断。
例：

    xhr.onreadychange=function(){};
    if(xhr.readyState===&&xhr.responseText===200){
		let a=JSON.parse(xhr.responseText); //转为JSON对象
		echo a;//php输出写法
}

HTTP状态码：

2开头 （请求成功）表示成功处理了请求的状态代码。
3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。
5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。

readyState：

4表示执行完毕