政务性网站建设费用百度开发者平台
AJAX
ajax全名async javascript and XHL
AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术（局部刷新）
通俗的讲，AJAX就是JS通过一个网站去加载数据，这个过程通常是用户不可见的传统的网页（不使用AJAX）如果需要更新内容，必须重新加载整个网页
生活中的同步和异步： 同步：先煮完饭，再去烧菜（一个时间段内，事情按照顺序做） 异步:煮饭同时也在烧菜（一个时间段。事情不按顺序做）
是一个默认异步执行机制 的功能
在程序中，同步和异步的区别就是在于代码的执行顺序。同步代码按照顺序运行，异步代码不按照顺序运行。
AJAX 的优势
- 不需要插件支持，原生JS就可以使用
- 用户体验好（不需要刷新页面就可以更新数据）
- 减轻服务端和带宽的负担
- 缺点： 搜多引擎的支持度不够，因为数据都不在页面上，搜索引擎搜索不到
AJAX的使用
- 在JS中有内置的构造函数来创建AJAX对象
- 创建AJAX对象以后，我们就使用AJAX对象的方法去发送请求和接受响应
创建一个AJAX对象
//IE9及以上
const xhr = new XMLHttpRequest()//IE9以下
const xhr = new ActiveXObject('Microsoft.XMLHTTP')//兼容写法
if(window.XMLHttpRequest){var xhr = new XMLHttpRequest();
}else{ //IE5 IE6var xhr = new ActiveXObject('Miceosoft.XMLHTTP');
};- 上面就是有了一个AJAX对象
- 我们就可以使用这个xhr对象来发送AJAX请求了
配置链接信息
const xhr = new XMLHttpRequest()//xhr对象中的open 方法是来匹配请求信息 的
//第一个参数是本次请求的请求方式get/post/put/。。。。
//第二个参数是本次请求的url
//第三个参数是本次请求是否异步，默认true 表示异步，false表示同步
//xhr.open('请求方式'，’请求地址‘，是否异步)
xhr.open('get','./data.php')- 上面的代码执行完毕以后，本次请求的基本配置信息就写完了
发送请求
const xhr = new XMLHttpRequest()
xhr.open("get","./data.php")//使用 xhr 对象中的send方法来发送请求
xhr。send（）- 上面代码是把配置好信息的AJAX对象发送到服务端
一个基本的AJAX请求
- 一个最基本的AJAX请求就是上面三步
- 但是光有上面三步，我们确实能把请求发送的到服务器
- 如果服务器正常的话，响应也能回到客户端
- 但是我们拿不到响应
- 如果想拿到响应，我们有两个前提条件
- 1：本次HTTP请求时成功的，也就是我们之前说的http状态码为200~299
- 2：AJAX对象也有自己的状态码，用来表示本次AJAX请求中各个阶段
ajax状态码
- Ajax状态码 xhr.readyState
- 是用来表示AJAX请求的全部过程中的某一个状态
readyState === 0 ： 表示未初始化完成，也就是 open 方法还没有执行
readyState === 1 ： 表示配置信息已经完成，也就是执行完 open 之后
readyState === 2 ： 表示 请求已接收
readyState === 3 ： 表示正在解析响应内容
readyState === 4 ： 表示响应内容已经解析完毕，可以在客户端使用了
- 这个时候我们就会发现，当一个Ajax请求的全部过程中，只有当readyState ===4 的时候，我们才可以正常使用服务器给我们的数据
- 所以，配合http状态码为200~299
一个 ajax 对象中有一个成员叫做 xhr.status
这个成员就是记录本次请求的 http 状态码的
下面是常见的HTTP状态码（HTTP Status Code）：
* 200：请求成功
* 301：网页被重定向到其它URL
* 304：文件未被修改，使用缓存资源
* 404：找不到此网页（指定的资源）
* 500：服务器内部错误两个条件都满足的时候，才是本次请求正常完成
readystatechange
- 在Ajax对象中有一个事件，叫做readystatechange事件
- 这个事件是专门用来监听Ajax对象的readyState值改变的行为
- 也就是说只要ready State的值发生变化了，那么就会触发该事件
- 所以我们就在这个事件中监听Ajax的ready State是不是到4 了
const xhr = new XMLHttpRequest()
xhr,open('grt','./data.php')
xhr.send()
xhr.onreadystatechange = function(){
//每次readyState改变的时候都会触发该事件
//我们就在这里判断readyState的值是不是到4
//并且HTTP的状态码是不是200~299
if(xhr.readyState === 4 && /^2d{2|$/.test(xhr.status)){//这里表示验证通过//我们就可以获取服务器给我们响应的内容了}
}
当readyState为 4 且 status为 200 时，表示响应已就绪，请求成功
xhr.onreadystatechange=function (){ if (xhr.readyState==4) { // 请求完成if (xhr.status==200) { //ok 成功alert( xhr.responseText ); // 得到响应结果 } else{alert( xhr.status ); // 弹出失败的状态码 }; };
}
onload
- 新版本的浏览器里面有一个新的方法onload
- onload表示ajax状态码为4
const xhr = new XMLHttpReqyest()
xhr.open('get','./data.php')xhr.send()
xhr.onload=function(){console.log(xhr.responseText)
}responseText、 responseXHL
- Ajax对象中的responseText成员
- 就是用来记录服务端给我们的响应内容的
- 所以我们就用这个成员来获取响应体内容就可以
const xhr = new XMLHttpRequest()
xhr.open('get','./data.push/)xhr.onredayStateChange = function(){if(xhr.readyState === 4 &&/^2d{2|$/.test(xhr.status)){//我们在这里直接打印 xhr.responseText 来查看服务端给我们返回的内容console.log(xhr.responseText)}
}使用AJAX发送请求时携带参数
- 我们使用AJAX发送请求也是可以携带参数的
- 参数就是和后代交互的时候给他的一些信息
- 但是携带参数get和post两个方法还是有区别的
发送一个带有参数的get请求
- get请求的参数就直接在url后面进行拼接就可以
const xhr = new XMLHttpRequest()
//直接在地址后面加一个？，然后以key=value的形式传递
//两个数据之间以 & 分割xhr.open('get','./data.php?a=100&b=200')
xhr.send()- 这样服务器就能接受两个参数
- 一个是a，值是100
- 一个是b，值是200
发送一个带有参数的post请求
- post请求的参数是携带在请求体中的，所以不需要再url后面拼接
const xhr = new X<LHttpRequest()
xhr.open('post','./data.php')//如果是用AJAX对象发送post请求，必须要先设置一下请求头中的content-type
//告诉一下服务端我给你的是一个什么样子的数据格式
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')//请求体直接再send的时候写在（）里面就行
//不需要问号，直接就是’key=value&key=value'的形式
xhr.send('a=100&b=200')- application/x-www-form-urlencoded表示的数据格式就是key=value&key=value
get与post区别
- get参数通过url传递，post放在请求体（request body）中；
- get请求再url传递的参数有长度限制，而post没有
- get比post更不安全，因为参数直接显示再url地址中，所以不能传递铭感数据
- get请求浏览器会主动缓存，而post不会
- get请求参数会保存再浏览历史记录，而post请求不会；
- get和post本质上都是tcp链接