原生ajax

本文详细介绍了Ajax的工作原理,包括创建XMLHttpRequest对象、设置回调函数、请求地址、open()方法、请求头和发送请求。同时,解释了HTTP状态码的意义以及同源策略和跨域问题。针对跨域,提到了JSONP和CORS两种解决方案,强调了跨域必须得到服务器端的允许。
摘要由CSDN通过智能技术生成

    原生ajax的原理:简单来说就是 通过XmlHttpRequest对象向服务器发异步请求,从服务器获得数据,然后用 javascript 来操作DOM更新页面的技术。

实现ajax的步骤:

1.创建对象

     首先我们需要一个Ajax的对象。在这里我们需要注意的是,由于不同的浏览器内核问题,部分浏览器对Ajax对象的创建方式不一样。在以IE7以下版本为内核的浏览器中,没有提供XMLHttpRequest对象。目前,浏览器基本都是支持XMLHttpRequest对象,所以不再考虑版本问题。(浏览器版本的不同,区别仅仅是创建对象的不同,其他都是一样的)

 2.设置回调函数

设置当请求执行后,服务器返回请求的状态码,根据请求的状态码对浏览器做出相应的响应。

3. 设置请求地址

设置请求地址,需要注意如果使用GET请求需要在url中绑定请求参数。

 4.设置open() 方法

    open方法用来告诉XMLHttpRequest对象,发送请求方式是"POST"还是"GET";请求需要发送到指定的url;执行方式是同步还是异步,默认为true(异步的方式)。这里设置成false(同步方式)与刷新页面无异。

5. 设置请求头(GET请求可以忽略这一步)

6.发送请求 

GET请求和POST请求的区别与form表单中method属性中的GET与POST区别一致。

 http常见状态码

 1**     信息,服务器收到请求,需要请求者继续执行操作
    2**     成功,操作被成功接收并处理
    3**     重定向,需要进一步的操作以完成请求
    4**     客户端错误,请求包含语法错误或无法完成请求
    5**     服务器错误,服务器在处理请求的过程中发生了错误

同源和跨域

1.同源策略:

    同源策略,它是由网景提出的一个著名的安全策略

    当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面

当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,

即检查是否同源,只有和百度同源的脚本才会被执行。 

      如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。

同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但是无法被浏览器接收。

2.处理跨域

    所有的跨域,都必须经过server端允许和配合。未经server端允许就实现跨域,说明浏览器有漏洞,危险信号。

【1】jsonp处理跨域

 在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用和进一步处理;在前台通过动态添加script标签及src属性,表面看上去与ajax极为相似,但是,这和ajax并没有任何关系;为了便于使用及交流,逐渐形成了一中非正式传输协议,人们把它称作 jsonp

【2】 cors处理跨域

     cors跨域的核心点是在服务端代码中设置一个响应头即可

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值