js语言特性
- js在发明之初,它的目的是做一些网页上面的小效果(小广告),最初使用的时候觉得有点鸡肋
- 被设计成单线程,一次只能做一件使用
- 只要前面的代码执行完毕了 ,后面的代码才能执行
- 特别消耗浏览器性能,假如前面一行代码执行了10s,后面的代码需要等待10s后才执行
- 为了解决单线程的问题,所以js里面提出了异步编程思想
- 异步可以和同步代码并存,而且彼此之间没有多大影响
- 异步程序代码执行时不会阻塞其他程序代码执行,从而提升整体执行效率。
- 同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务
- 异步: 不受当前任务的影响,两件事情同时进行,做一件事情时,不影响另一件事情的进行。
- 编程中:异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。
创建ajax
- xml指的是前后端使用的数据格式,功能和json是一样的
- http上网的协议,超文本传输协议,发送请求的时候绕不过http协议
- request表示请求
- 注意点:
- ajax不一个新的技术,而是几个技术的结合体
<button>发送请求</button>
<script>
let btn = document.querySelector('button')
btn.onclick = function(){
/*
创建ajax
+ xml指的是前后端使用的数据格式,功能和json是一样的
+ http上网的协议,超文本传输协议,发送请求的时候绕不过http协议
+ request表示请求
+ 注意点:
=> ajax不一个新的技术,而是几个技术的结合体
*/
let xhr = new XMLHttpRequest()
// console.log(xhr.readyState)
/*
填写请求信息
+ 参数1表示请求方式
=> get
=> post
+ 参数2表示请求地址
=> 后端地址
=> api(称之为接口)
+ 参数3表示同步或者异步
=> 默认就是异步
=> true异步
=> false同步
+ 注意点:
=> 咱们在实际的开发中后端会给咱们请求地址
=> 在工作有一个开发文档,需要的东西都在这个文档里面
*/
xhr.open('get', 'http://localhost:8888/test/second')
// console.log(xhr.readyState)
/*
监听请求的状态
+ onreadystatechange 监听请求状态的事件
+ responseText就是后端给咱们前端返回数据
xhrObj.readyState - 返回当前请求的状态
xhr.readyState = 0时-未初始化,对象已建立,尚未调用open()
xhr.readyState = 1时-初始化,对象建立未调用send()
xhr.readyState = 2时-发送数据,send()方法调用,但是当前的状态及http头未知,请求未完成
xhr.readyState = 3时-数据传输中,接受部分数据
xhr.readyState = 4时-响应内容解析完成
*/
xhr.onreadystatechange = ()=>{
// console.log(xhr.readyState)
// 注意点1:判断readyState==4表示只有数据解析完成,才去接受完整的数据,如果不判断有可能接收的数据是不完整的
if(xhr.readyState == 4){
// 注意点2:判断status==200表示只要状态码是200,是成功的情况再去接收数据,如果由于其他的原因请求无法成功就不接收数据
if(xhr.status == 200){
console.log(xhr.responseText)
}else{
console.log('请求失败')
}
}
}
// 发送请求
xhr.send()
// console.log(xhr.readyState)
}
</script>
ajax ——get的请求方式
<button>request</button>
<script>
let btn = document.querySelector('button')
btn.onclick = function(){
// 创建ajax对象
let xhr = new XMLHttpRequest()
// 请求信息
// get请求方式,给服务器传递参数的时候,要求在open()第二个参数哪里进行查询字符串拼接
xhr.open('get', 'http://localhost:8888/test/second?name=张三&age=18')
// 监听请求状态
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
// 注意点:后端给咱们返回的数据是json格式,咱们要使用需要用JSON.parse()进行数据解析
console.log(JSON.parse(xhr.responseText))
console.log(xhr.responseText)
}
}
}
// 发送请求
xhr.send()
}
</script>
ajax ——post的请求方式
y>
<button>request</button>
<script>
let btn = document.querySelector('button')
btn.onclick = function(){
// 创建ajax对象
let xhr = new XMLHttpRequest()
// 请求信息
xhr.open('post', 'http://localhost:8888/test/fourth')
// 请求头信息设置
// 注意点:post请求方式要求设置请求头,这个设置内容比较长,你们最好复制
// application/x-www-form-urlencoded表示数据以表单形式去解析,例如:咱们传递参数的时候
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
// 监听请求状态
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
// 注意点:后端给咱们返回的数据是json格式,咱们要使用需要用JSON.parse()进行数据解析
console.log(xhr.responseText)
console.log(JSON.parse(xhr.responseText))
}
}
}
// 发送请求
// post请求方式传递参数要求咱们把数据写在send()方法
xhr.send('name=张三&age=18')
}
</script>
get和post的区别
- get是向服务器获取数据,post是向服务器传输数据
- get没有post安全,因为post是通过http post机制加密过
- get 传递的数据在url中看得到,而post是看不到的
- get 传递数据有大小限定,一般4kb左右,而post理论上是没有限定的
- get执行速度比post快