ajax设置ua,Ajax

什么是Ajax(Asynchronous JavaScript and Xml)：

Ajax通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理

什么是HTTP请求？

浏览器与服务器之间，采用HTTP协议通信。

用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出HTTP请求。

服务器端接收到请求，会进行计算，向浏览器返回一个包含事务结果的HTTP响应报文。

为什么要使用Ajax？

能够向服务器请求额外的数据而无需加载整个页面，会带来好的用户体验

Ajax是一种技术方案，可以和后端交换数据，不用刷新页面。

优点：

更新数据而不需要刷新页面：它能在不刷新整个页面的前提下与服务器通信维护数据，按照需求请求数据，避免了发送大量的数据。

异步通信：与服务器使用异步的方式通信，不会打断用户的操作。

前后端负载平衡：可以将后端服务器的一些工作转移给客户端，利用客户端限制的能力来处理，减轻了服务器的负担。

数据与呈现分离：利于分工，降低前后耦合。

缺点：

浏览器历史记录的遗失：在使用Ajax对页面进行改变后，由于没有刷新页面，没有改变页面的访问历史，当用户想要回到上一个状态时，无法使用浏览器提供的后退。

Ajax的安全问题：Ajax的出现就像建立起了一直通信服务器的另一条通道，容易遭受一些攻击。

如何和后端进行交互呢？

form表单提交

通过submit按钮被点击，浏览器会默认将inpiut中的内容提交到form的action的地址上

//会提交到当前域名下的form.html

//缺点：页面会跳转，单项提交，没有后台反馈，影响用户体验。

ajax

websocket

Ajax包括以下几个步骤：

创建Ajax对象

发出HTTP请求

接收服务器返回的数据

更新网页数据

接下来通过代码来看一下如何实现一个Ajax

实现一个最简单功能的Ajax

Ajax

var xhr = new XMLHttpRequest() //创建一个对象

xhr.open('GET', '/hello.json', true)//设置参数，请求的类型，地址，是否使用异步

//hello.json 可以把他当作一个资源，而不是一个文件

//true为异步，false为同步获取的方式

xhr.send()//发送请求

//内部数据到达会默认触发load

xhr.addEventListener('load', function(){

var data = xhr.responseText;

console.log(data);

})//监听

当请求不存在的文件时防止服务器挂掉，看看下面的方法

var xhr = new XMLHttpRequest()

xhr.open('GET', '/hello2.json', true)//请求不存在的文件，404 not found

xhr.send()//发送请求

//监听通信状态的变化

xhr.onreadystatechange = function(){

if(xhr.readyState ===4 && xhr.status ===200){

console.log(xhr.responseText);

}

}

xhr.addEvenListener('onreadystatechange' = function(){

console.log('readyState:', xhr.readyState);

//准备状态，握手的过程，每次握手会发生改变，可以监听到内部状态的改变

})

xhr.addEventListener('load', function(){

//内部数据到达会默认触发load

console.log(xhr.status);

if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){

//304 请求缓存

//成功了

var data = xhr.responseText;

console.log(data);

}else{

console.log('error');

}

xhr.onerror = function(){ //内部出现错误

console.log('error');//例如断网，数据还未到达服务器

}

xhr.ontimeout = function(){ //超时

}

}) //监听

//status: 服务器的一个状态，数据是否OK

//readystate: 交互流程是否完毕，0-4 五个状态

//load: 状态为4时会自动触发load，交互完毕一定是4，所以可以不写readystate

POST方法

var xhr = new XMLHttpRequest();

xhr.open('POST', '/login', true);

//把需要发送的数据拼好放在send中

xhr.send('username=zuodong&password=123');

//也可以将这个函数写进send中，拼接URL

/*makeUrl({

username: 'zuodong',

age: 23

})*/

//需要发送的数据，函数的方式

/*makeUrl({

username: 'zuodong',

age: 23

})*/

xhr.addEventListener('load', function(){

console.log(xhr.status);

if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){ //304 请求缓存

var data = xhr.responseText;

console.log(data);

}else{

console.log('error');

}

})

xhr.onerror = function(){ //内部出现错误

console.log('error');//例如断网，数据还未到达服务器

}

makeUrl({

username: 'zuodong',

age: 23

})

function makeUrl(obj){

var arr = []

for(var key in obj){

arr.push( key + '=' + obj[key])

}

return arr.join('&')

}

//最终拼接成：username=zuodong&password=123

封装一个Ajax

function ajax(opts){

var url = opts.url;

//假设用户没有设置type，则默认为GET

var type = opts.type || 'GET';

//数据类型默认为json

var dataType = opts.dataType || 'json';

//如果用户没有设置，则传递一个空函数

var onsuccess = opts.onsuccess || function(){};

var onerror = opts.onerror || function(){};

//如果没有数据，默认传递一个空数据

var data = opts.data || {};

//将用户传递的参数，如用户名密码，将这个对象进行一个处理，序列化

var dataStr = [];

for(var key in data){

dataStr.push(key + '=' + data[key]);

}

dataStr = dataStr.join('&');

if(type === 'GET'){

url +='?' + dataStr;

}

var xhr = new XMLHttpRequest();

xhr.open(type, url, true);

xhr.onload = function(){

if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){

//成功了

//如果用户设置的需要返回的数据类型需要的是json格式

if(dataType === 'json'){

//把对象返回的数据解析成json格式

onsuccess(JSON.parse(xhr.responseText));

}else{

onsuccess(shr.responseText);

}

}else{

//如果是其他状态，调用用户的onerror

onerror();

}

}

xhr.onerror = onerror;

if(type === 'POST'){

xhr.send(dataStr);

}else{

xhr.send();

}

}

//约定好的需要传递的参数

ajax({

url: 'http://api.jirengu.com/weather.php',

data: {

city: '北京'

},

onsuccess: function(ret){

console.log(ret)

},

onerror: function(){

console.log('服务器异常');

}

})

XMLHttpRequest实例的属性

readyState

只读属性，用一个正数对应的常量，表示XMLHttpRequest请求当前所处的状态。

0：对用常量UNSET，表示XMLHttpRequest实例已经生成，但是open()方法还没有调用。

1：对应常量OPENED，表示send()方法还没有被调用，任然可以使用setRequestHeader()，设定HTTP请求头信息。

2：对应常量HEADERS_RECEIVED，表示send()方法已经执行，并且头信息和状态码已收到。

3：对应常量LOADING，表示正在接受服务器传来的body部分的数据，如果responseType属性是text或者空字符串，responseText就会包含已经收到的部分信息。

4：对应常量DONE，表示服务器数据已经完全接收，或者本次接收已经失败了。

在通信过程中，每当发生状态变化的时候，readyState属性的值就会发生改变。这个值每一次变化，都会触发readyStatyChange事件。

responseType

responseType属性用来指定服务器返回数据类型。

""：字符串(默认值)

arraybuffer：ArrayBuffer对象

blob：Blob对象

document：Document对象

json：JSON对象

text：字符串

status

status属性为只读属性，表示本次请求所得到的HTTP状态码，它是一个整数。一般来说，如果通信成功的话，这个状态码是200。

200：OK，访问正常

301：Moved Permanently，永久移动

302：Move temporarily，暂时移动

304：Not Modified，未修改

307：Temporary Redirect，暂时重定向

401：Unauthorized，未授权

403：Forbidden，禁止访问

404：Not Found，未发现指定网址

500：Internal Server Error，服务器发生错误

基本只有2xx和304的状态码，表示服务器返回是正常状态。

参考资料