原生AJAX请求以及AJAX跨域问题

说在前面:
传统方法的缺点:

传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽,由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

什么是ajax?

ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

一、 原生AJAX

AJAX:“Asynchronous Javascript And XML”(异步Javascript和XML),是指一种创建交互式应用的网页开发技术。

注意
① AJAX不是新的编程语言,而是一种使用现有标准的新方法
② AJAX最大的有点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容
③ AJAX不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
1. XMLHttpRequest对象:用于在后台与服务器交换数据。意味着可以在不重新加载整个网页的情况下,对网页某部分进行更新。目前所有浏览器都支持XMLHttpRequest
五步使用XMLHttpRequest

① 创建XMLHttpRequest对象:var obj = new XMLHttpRequest()

② 使用open方法设置请求方式和地址以及相关交互信息:obj.open(method,url,asyncFlag,user,name,callback)。其中methodpost/get两种方法,asyncFlag为是否异步(默认为true,即默认为异步,若写false,浏览器不会报错,会报警告)。username有时用来确认身份。callback可用来接收服务器返回的内容

③ 设置发送的数据,开始和服务器端交互:obj.send(data)。若为get方法,则数据在url后面,每个参数用&连接,且数据和地址之间用?连接。若为post方法,数据作为send方法的参数。

④ 注册事件:onreadystatechange

属性 描述
onreadystatuschange 存储函数(或函数名),每当readyState属性改变时,就会调用该函数
readyState 存储XMLHttpRequest的状态(0-4。0:请求未初始化。1:服务器连接已建立。2:请求已接收 3:请求处理中。4:请求已完成,且相应已就绪
status 200:“ok”。404:未找到页面

⑤ 服务器响应:obj.responseText/obj.responseXML

属性 描述
responseText 获得字符串形式的相应数据
responseXML 获得xml形式的相应数据
response
二、js几种跨域方法和原理

js跨域是指通过js在不同的域之间进行数据传输或通信
浏览器(注意:主体是浏览器)出于安全方面的考虑,只允许与本域(同协议、同域名、同端口)下的数据接口进行交互,不同源的客户端脚本在没有授权的情况下,是不能读写对方资源的。

原生AJAX请求以及AJAX跨域问题_第1张图片

1. 用XMLHttpRequest实现跨域

在服务器发送回应时,需要添加一个头文件:response.setHeader("Access-Control-Allow-Origin","http://js.host");。这个文件头的第一个参数是允许跨域,第二个参数是接受跨域的服务,上述文件头说明了服务器信任来自http://js.host的请求。

2. 通过jsonp跨域:需要客户端与服务端配合

思想:用其它可以跨域请求的元素,代替ajax、程序中都是

你可能感兴趣的:(学习)