Ajax初体验

Posted 2020-08-06 程序猿1990

协议的定义:可以理解为一套规范,当使用的双方都遵守这套规范时,才能够实现沟通.
常见的协议有:HTTP,HTTPS超文本传输协议
FTP文件传输协议
SMTP邮件传输协议
http协议:网站是基于HTTP协议的,比如我们在开发网站中经常使用的css,js,图片等等都是基于该协议进行传输的
浏览器通过向服务器请求报文,从而告诉服务器浏览器的一些信息,服务器接到请求报文后知道浏览器的一些内容,然后找符合浏览器需要的一系列内容,找到之后再通过响应报文告诉浏览器结果
请求报文包括:请求报文头,请求报文行.请求报文体...响应报文也一样

浏览器访问http服务器,接收到响应时,会根据响应报文头的内容进行一些具体的操作,在php中,我们能够使用 header来设置这些内容
设置文本编码
设置编码格式为:utf-8
header(‘content-type:text/html; charset= utf-8‘);
设置页面跳转
设置跳转到百度首页
header(‘location:http://www.baidu.com‘);
设置页面间隔刷新
header(‘refresh:3; url=http://www.xiaomi.com‘);

同步和异步
同步:必须等待前面的任务完成,才能继续后面的任务
异步:不受当前任务的影响
平常访问的很多网站都是用的异步更新,比如微博,朋友圈等,往下翻可以一直加载下去,并且没有刷新,于是就引入了Ajax

ajax:单词解释: Asynchronous javascript And XML（异步JavaScript和XML）,他并不是凭空出现的新技术,而是对于现有技术的结合:核心是js对象XMLHttpRequest
ajax的五步使用法:
1.建立XMLHTTPRequest对象
2.注册回调函数,当服务器回应我们了,我们想要执行什么逻辑
3.使用open方法设置和服务器端交互的基本信息,设置提交的网址,数据,post提交的一些额外内容
4.设置发送的数据，开始和服务器端交互,发送数据
5.更新界面,在注册的回调函数中,获取返回的数据,更新界面

示例代码:GET get的数据,直接在请求的url中添加即可

<script type="text/javascript">
// 创建XMLHttpRequest 对象
var xml = new XMLHttpRequest();

// 设置跟服务端交互的信息
xml.open(‘get‘,‘01.ajax.php?name=fox‘); //注意拼接字符串xml.open(‘get‘,‘01.ajax.php?name=‘+fox);
xml.send(null); // get请求这里写null即可或者不写

// 接收服务器反馈
xml.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
if (xml.readyState == 4 && xml.status == 200) {
// 打印响应内容
alert(xml.responseText);
}
};
</script>
示例代码:POST
<script type="text/javascript">
// 异步对象
var xhr = new XMLHttpRequest();

// 设置属性
xhr.open(‘post‘, ‘02.post.php‘ );

// 如果想要使用post提交数据,必须添加
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

// 将数据通过send方法传递
xhr.send(‘name=fox&age=18‘); // 输入是是字符串,不要忘记引号

// 发送并接受返回值
xhr.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
</script>