欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

学习ajax原理

程序员文章站 2022-04-28 23:49:36
...

学习ajax原理
时间:2005年(更早出现使用)开始规范使用
全称:AsynchronousJavascriptandXML。
核心:xmlHttpRequest 对象。 简称:XHR
作用:用于浏览器向服务器请求额外数据而不卸载页面,极大提高了用户体验。
XHR 对象和请求
xhr是一个API,为客户提供服务端和客户端之间通信的功能,并且不会刷新页面,它能取回所有的数据类型。支持 http、https、file、ftp协议。我们可以通过其构造函数来创建一个新的 xhr 对象,这个操作在其他操作之前完成。
var xhr = new XMLHttpRequest();
xhr 原型链:object > EventTarget > XMLHttpRequest
学习ajax原理
当创建完 xhr 对象后首先得调用他的 open() 方法

//第一个参数:表示请求类型(get/post)。
//第二个参数:表示请求路径,可以是相对路径或者绝对路径。
//第三个参数:代表是否为异步,true时为异步,false为同步。
//第四、五个参数:可选的授权使用参数,因为安全性不推荐明文使用。
xhr.open('get','example.php',true,username,password);

在这里受同源策略的影响,当第二个参数url跨域的时候会被浏览器报安全错误。同源策略指的是当前页面和目标url协议、域名和端口均相同。后面也会讲到,除IE之外的浏览器通过XHR对象实现跨域请求,只需将url设置为绝对url即可。
当初始化请求完成后,我们便可调用send()方法发送请求:

var data = new ForData();
data.append('name','Nicholas');
//接受一个请求主体发送的数据,如果不需要,传入null
xhr.send(data);

当请求的类型为get/head时,send()的参数会被忽略并置为null,send()传递的参数会影响到我们请求的头部content-type的默认值,该字段代表返回的资源内容的类型,用于浏览器处理,如果没有设置或在一些场景下,浏览器会进行MIME嗅探来确定怎么处理返回的资源。
XHR2级中定义了ForData数据,用于常见的类表单数据序列化:

//直接传入表单id
var data = new FormData(document.getElementById('user-from'));
//创建类表单数据
var data = new FormData();
data.apped('name','Nicholas');
//'FormData'可以直接被send()调用,会自动修改xhr的content-type头部
xhr.send(data);
//请求头部的content-type

未完!!!

相关标签: ajax