Ajax概念及基础

Posted 2020-08-06 5毛钱小辣条

今天只是介绍ajax概念及基础语法,使用的只是简单的逻辑,目的是加深ajax的作用和使用方法.
1. 网络传输协议
网络传输协议是一套规定浏览器与服务器之间交流时需要遵守的规范.如果浏览器与服务器各自设定协议不一致的话,就会产生两个之间交流的障碍.
而在两者交互的时候无非是浏览器发出请求报文,服务器接收请求报文并返回响应报文,浏览器解析并渲染响应报文.
1.1 请求报文
请求报文是由浏览器发出,分三个部分:请求行,请求头,请求主体.
1.1.1 请求行
包含请求的方法:get或post;
请求的路径或者是地址;
请求是遵循的协议类型.
1.1.2 请求头
请求头主要是将浏览器端的各种版本等信息传输给服务器.
1.1.3 请求主体
请求主体中的内容是浏览器端提供给服务器的数据.如用户传入的个人信息或者是需要查询的内容.
1.2 响应报文
响应报文是服务器发出,服务器接收并处理完成请求报文后,服务器将处理完的结果发送给浏览器.它也分为三个部分:响应行,响应头,响应主体.它分别与浏览器的三个部分相对应.
2. Ajax概念及基础
2.1 同步与异步
在了解Ajax前需要先了解同步与异步的概念.
2.1.1 同步更新
指的是必须完成前面的任务才能执行后面的任务,也就是需要逐个执行任务.
就比如我们在浏览一个网页时,当浏览到底部网页结束了,我们就需要刷新网页使网站重新加载才能获得最新更新的内容一样.
2.1.2 异步更新
不受当前任务影响,可以直接在当然任务执行的同时执行其他任务.
就比如我们打开微博时,当原本页面浏览完毕前,浏览器会在原有基础上加载出更多的不同的信息一样.
2.2 Ajax概念
Ajax = 异步 javascript 和XML.
以前用户更多的是一直刷新网页来获得更多信息,但是这样会重复加载页面中的部分内容,用户会重复浏览同样的信息.
而我们可以通过Ajax来使页面不需要刷新就能逐渐获取更多的信息.
2.3 Ajax基础使用
需要在页面中实现不刷新就能获取信息,就需要使用Ajax来仿照页面刷新时浏览器与服务器之间的交互过程.可以总结成5个步骤.
2.3.1 通过get请求方法时的步骤
1 创建一个异步对象
var jaxaObj = new XMLHttpRequest();
2 设置请求的方法及服务器路径(模拟表单提交时的状态,在服务器路径中添加需要传入服务器的参数,如‘ajax.php?name=value‘)
ajaxObj.open(‘请求的方法‘,‘服务器的路径或地址‘);
3 浏览器发出请求
ajaxObj.send();
4 给异步对象注册响应状态改变事件,等待并接受服务器的响应报文
ajaxObj.onreadystatechange = function (argument) {};
5 在注册事件中判断浏览器完全接收响应报文时,获取到请求的数据,将数据按要求添加到页面中.
2.3.2 通过post请求方法时的步骤
1 创建一个异步对象
var jaxaObj = new XMLHttpRequest();
2 设置请求的方法及服务器路径(注意:当通过post方式时不能像get方式时的添加,这里的服务器路径是纯粹的路径)
ajaxObj.open(‘请求的方法‘,‘服务器的路径或地址‘);
3 注意:在使用post请求时需要在发送请求前添加下面代码(下面代码为仿照表单使用post请求时的请求注意)
ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
3 浏览器发出请求,并在发送后添加需要传递给服务器的数据
ajaxObj.send(‘key1=value1&key2=value2...‘);
5 给异步对象注册响应状态改变事件,等待并接受服务器的响应报文
ajaxObj.onreadystatechange = function (argument) {};
6 在注册事件中判断浏览器完全接收响应报文时,获取到请求的数据,将数据按要求添加到页面中.
2.3.3 使用get或是post方法请求时PHP中不同的地方
在PHP中需要注意获取数据时的方式:
get请求方法:$_GET[‘key‘]来获取浏览器传递过来的数据.
post请求方法:$_POST[‘key‘]来获取浏览器传递过来的数据.
2.4 XMLHttpRequest对象
XMLHttpRequest:用于在后台与服务器交换数据.它有几个常用的方法和事件,但是同时还需要注意.
2.4.1 open(method,url,async)
设置请求的类型、URL以及是否异步处理请求。
method:请求的类型,GET或POST.
url:文件在服务器上的位置.
async:设置是否异步,true（异步）或false（同步）,默认值为true.
2.4.2 send(string)
发送请求报文,只有在post请求方式时传入string值.
2.4.3 onreadystatechange事件及其参数
1 onreadystatechange事件是每当XMLHttpRequest 的状态改变时,就会调用注册事件的函数.
2 readyState指的是XMLHttpRequest的状态,
 0: 请求未初始化
 1: 服务器连接已建立
 2: 请求已接收
 3: 请求处理中
 4: 请求已完成，且响应已就绪
3 status 响应状态
200:第一次加载的响应报文
404:未找到指定页面
2.4.4 服务器响应的数据
responseText:获取的是字符串形式的响应数据.