关于AJAX

通过使用以及最近的查找资料,现在对ajax做一些总结。
ajax的官方翻译为:异步的javascript和XML,用于创建快速动态网页。学习ajax之前学习了php,用php写了登录注册的页面,复杂程度可见一斑,每次更新内容后都需要重新载入页面,ajax就是基于解决这种情况而产生的,做到局部刷新页面。从以下这几个方面进行总结:

一、原生创建XMLHttpRequest对象。

var xmlhttp;
if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
} else {
    //兼容IE5/IE6
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}

二、ajax发送请求
使用xmlHttpRequest对象的open()和send()方法。
其中xmlHttpRequest.open(method, url, async)发起请求

  • metnod: 请求类型 GET or POST
  • url: 处理响应的地址
  • async: 同步异步请求,一般情况下使用true异步请求

如果使用GET方法,代码如下:

xmlhttp.open("GET", "ajax.php?user=" + uservalue, true);
xmlhttp.send();

使用get方法如果要传参数,可以在地址后加上请求字符串。

注意:ajax会先获取本机的缓存,若果有相同的页面信息,则不向服务器发送请求,我们显然不想要这种结果,可以在地址后传一个一直可以改变的参数,如:"&t=" + Math.random()

如果使用POST方法,代码:

var data = "user=" + namespace.user + "&pw=" + namespace.pw + "&t=" + Math.random();      
xmlhttp.open("POST", "ajax.php", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(data);

发送POST请求时,data会自动连接到地址后

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

表示客户端提交给服务器文本内容的编码方式 是URL编码,即除了标准字符外,每字节以双字节16进制前加个"%",不过,没加似乎也没太大的影响,目前没发现吧

三、ajax响应
xmlhttp的响应属性分为responseText和responseXML

  • responseText: 获得字符串形式的响应数据,如果返回的数据格式不是XML,请使用该属性
  • responseXML: 获得XML格式的响应数据(处理起来比较麻烦)

四、ajax的onreadystatechange事件

  • 当请求发送到服务器后,每当readyState属性改变时,就会触发onreadystatechange事件
  • readyState存储有XMLHttpRequest对象的状态,从0-4进行变化

0: 请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:处理完成,且响应就绪

  • status

200: "ok"
404: "not found"

代码如下:

xmlhttp.onreadystatechange = function () {
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        //resolve;
    } else {
        console.log("error: " + xmlhttp.status);
    }
}

嗯~,一个简单的ajax请求就完成啦。但是呢,我们经常还会遇到这么一个问题:跨域请求

五、跨域请求
概念:什么是跨域请求?为了保证用户信息安全,浏览器制定了同源策略。同源。即协议相同、域名相同、端口相同,如果其中一个不满足就会出现跨域的问题。
解决的方法:

  • JSONP

JSONP是服务器与客户端跨源通信的常用方法,基本思想是通过动态添加<script>标签,向服务器请求JSON数据,该方法不受同源策略的束缚,注意需要一个callback参数来接收回调函数。

  • webSocket
    关键点在于Origin字段,表示该请求的请求源,服务器回对此作出回应

  • CORS
    W3C标准,全称为“跨域资源共享”。可以在服务器端设置头信息:Access-Control-Allow-Origin为可以通信的地址,或者“*”,代表所有源都允许通信。

暂时写到这,想到或者遇到后再进行更新或详解。

原文地址:https://www.cnblogs.com/susantong/p/6071054.html