1.使用xhr发起GET请求(步骤)
1.创建XHR对象
var xhr = new XMLHttpRequest ()
2.调用open函数,指定请求方式与URL地址
xhr.open ( 'GET','地址' )
使用xhr对象发起带参数的GET请求时,只需在调用xhr.open期间,为URL地址指定参数即可:
xhr.open ( 'GET','http://....?id=2')
这种在 URL地址后面拼接的参数,叫做查询字符串。
无论使用
.
a
j
a
x
(
)
,还是使用
.ajax(),还是使用
.ajax(),还是使用.get(),又或者直接使用xhr对象发起GET请求,当需要携带参数的时候,本质上,都是直接将参数以查询字符串的形式。追加到URL地址的后面,发送到服务器的。
3.调用send函数,发起Ajax请求
xhr.send ()
4.监听onreadystatechange事件
xhr.onreadystatechange = function() {
//4.1监听xhr 对象的请求状态readystate ;与服务器响应的状态status
if(xhr.readystate === 4 && xhr.status === 200) {
//4.2打印服务器响应回来的数据
console.log (xhr.responseText)
}
}
2.使用xhr发起POST请求
1.创建xhr对象
var xhr = new XMLHttpRequest()
2.调用open()
xhr.open ('POST', '地址' )
3.设置Content-Type属性(固定写法)
xhr.setRequestHeader ( 'Content-Type','application/x-www-form-urlencoded' )
4.调用send(),同时将数据以查询字符串的形式,提交给服务器
xhr.send ('bookname=水浒传&author=施耐庵')
5.监听onreadystatechange事件
xhr.onreadystatechange = function() {
if (xhr.readystate === 4 && xhr.status === 200) {
console.log (xhr.responseText)
)
3.xhr对象的readyState属性
XMLHttpRequest对象的readyState属性,用来表示当前Ajax 请求所处的状态。每个 Ajax请求必然处于以下状态中的一个:
值/状态 | 描述 |
---|---|
0/UNSENT | XMLHttpRequest对象已被创建,但尚未调用open方法。 |
1/OPENED | open0方法已经被调用。 |
2/HEADERS_RECEIVED | send0方法已经被调用,响应头也已经被接收。 |
3/LOADING | 数据接收中,此时response 属性中已经包含部分数据。 |
4/DONE | Ajax请求完成,这意味着数据传输已经彻底完成或失败。 |
4.URL编码
URL地址中,只允许出现英文相关的字母、标点符号、数字,因此,在URL地址中不允许出现中文字符。如果URL中需要包含中文这样的字符,则必须对中文字符进行编码(转义)。
URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的字符。URL编码原则的通俗理解:使用英文字符去表示非英文字符。
API:
- encodeURI() 编码的函数
- decodeURI() 解码的函数
实例:
<script>
var str = '编码'
var str2 = encodeURI(str)
console.log(str2)
console.log('----------')
var str3 = decodeURI('%E8%A5%BF%E6%B8%B8%E8%AE%B0')
console.log(str3)
</script>