深入理解AJAX系列:

最新推荐文章于 2021-08-06 23:00:58 发布

慕北

最新推荐文章于 2021-08-06 23:00:58 发布

阅读量197

点赞数

分类专栏：开发文章标签： ajax post与get

本文链接：https://blog.csdn.net/seadfeds/article/details/80060039

版权

开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一. ajax创建步骤：
html页面的请求：百度一下
1.获取需要创建函数的节点位置，并为节点添加onclick响应函数
window.onload = function(){
document.getElementsByTagName(“a”)[0].οnclick=function(){ …..}
2.取消该节点的默认行为，即跳转到下一个页面的行为，防止发生页面刷新
return false;
3.创建XMLHttpRequest对象，这是ajax中最重要的部分之一
var ajax = new XMLHttpRequest();
4.准备请求的数据，即url请求地址和method请求方式。调用open方法，表示准备开火，开火的方式和路径都准备好了
var url = this.href
var method = “get”;
==等于==ajax.open(“get”,this.href);
5.调用XMLHttpRequest对象的send方法，开始发送数据，开火
ajax.send(null);
6.为XMLHttpRequest对象添加onreadystatechange响应函数，必须的
ajax.onreadystatechange = function(){………..}
7.判断XMLHttpRequest对象添加属值，判断状态readyState==4，表示加载完成；和status==200或者status==304表示可用，status==404表示不可用
if(ajax.readyState==4 && ajax.status==200||ajax.status==304)
8.打印响应结果：responseTxt属性
alert(ajax.responseText)；

完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //1.获取a节点，并为他添加一个onclick函数
    window.onload = function(){
        document.getElementsByTagName("a")[0].onclick=function(){
            //3.创建XMLHttpRequest对象
            var ajax = new XMLHttpRequest();
            //4.主备发送的数据
            var url = this.href;
            var method = "get";
            //5.调用XMLHttpRequest对象的open方法,找到url地址，打开炮口
            ajax.open(method, url);
            //4--5：可以简化为一步
            /*
            ajax.open("get",this.href);
            */
            //6.调用XMLHttpRequest对象的send方法，开火,发送请求
            ajax.send(null);
            //7.为XMLHttpRequest对象添加onReadystatechange函数事件
            ajax.onreadystatechange = function(){
                //8.为XMLHttpRequest对象添加readyState属性，通过属性值来判断状态是否为4判断加载完成
                //9.为XMLHttpRequest对象添加status属性，通过属性值是否为200或者304判断是否可用
                if(ajax.readyState==4 && ajax.status==200||ajax.status==304){
                //10.打印XMLHttpRequest对象的返回值
                alert(ajax.responseText);
                }
            }
            //2.取消a节点的默认行为，即跳转到下一页
            return false;
        }
    }
</script>
</head>
<body>
    <a href="helloajax.txt">百度一下</a>
</body>
</html>

二.ajax里主要注意有：
1. 1个对象XMLHttpRequest对象
2. 3个方法：open（method，url）；send（发送请求）；setRequestchange(和post方法一起使用);
3. 5个属性：onreadystatechange、readystate（0,1,2,3,4）、responeText、responeXML、status（200,304,404等）

三.Get方法和post方法
1.get是最常见的请求，最常用于向服务器查询某些信息；post方法，通常用于向服务器发送应该被保存的数据；
Get请求和Post请求的区别
（1）使用Get请求时,参数在URL中显示,而使用Post请求,则不会显示出来；
（2）Post传输的数据量大，可以达到2M，而Get方法由于受到URL长度的限制,只能传递大约1024字节.
（3）Get请求请求需注意缓存问题,Post请求不需担心这个问题；
（4）Post请求必须设置Content-Type值为application/x-form-www-urlencoded；
（5）发送请求时,因为Get请求的参数都在url里,所以send函数发送的参数为null,而Post请求在使用send方法时,却需赋予其参数；
（6）GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题。

慕北

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
深入理解AJAX系列:

一. ajax创建步骤： html页面的请求：百度一下 1.获取需要创建函数的节点位置，并为节点添加onclick响应函数 window.onload = function(){ document.getElementsByTagName(“a”)[0].onclick=function(){ …..} 2.取消该节点的默认行为，即跳转到下一个页面的行为，防止发生页面刷...
复制链接

扫一扫