HTTP和AJAX(四、实现AJAX)

10 篇文章 0 订阅
7 篇文章 0 订阅


####基于原生JS实现AJAX
....Javascript(以下为实现的代码及注释)
//=>创建一个AJAX对象
let xhr=new XMLHttpRequest();//=>不兼容IE6及更低版本浏览器(IE6:ActiveXObject)

//=>打开请求地址(可以理解为一些基础配置,但是并没有发送请求呢)
xhr.open([method],[url],[async],[user name],[user password]);

//=>监听AJAX状态的改变,获取响应信息(获取响应头信息、获取响应主体信息)
xhr.onreadystatechange=()=>{
    if(xhr.readyState===4&&xhr.status===200){
        let result=xhr.responseText;//=>获取响应主体中的内容
    }
};

//=>发送AJAX请求(括号中传递的内容就是请求主体的内容)
xhr.send(null);

、、、
**分析第二步中的细节点**
>>xhr.open([method],[url],[async],[user name],[user password]);
>[method]:[HTTP/ajax请求方式]
 1.GET系列请求(代表获取)
 get
 delete:从服务器上删除某些资源文件
 head:只想获取服务器返回的响应头信息(响应主体内容不需要获取)
 ....
 2.POST系列请求(代表推送)
 -post
 -put:向服务器中增加指定的资源文件
 -...
 >以上两种方式,不管哪一种请求方式,客户端都可以把信息传递给服务器,服务器也可以把信息返回给客户端,只是GET系列一般以获取为主(给的少,拿回来的多),而POST系列一般以推送为主(给的多,拿回来的少)
 >1)我们想获取新闻列表的信息,我们一般使用GET请求,因为只需要向服务器端发送请求,告诉服务器端我们想要什么,服务器端就会把需要的数据返回
 >2)在实现注册功能的时候,我们需要把客户输入的信息发送给服务器进行存储,服务器一般返回成功还是失败等状态,此时我们一般都是基于POST请求完成
 
 
 
 >>>GET系列请求和POST系列请求,在项目实战中存在很多的区别
 >1.GET请求传递给服务器的内容一般没有POST请求传递给服务器的内容多
   原因:GET请求传递给服务器内容一般都是基于URL地址问号传递参数来实现的,
        而POST请求一般都是基于‘设置请求主体’来实现的。
   >各大浏览器都有自己URL最大长度限制(谷歌一般是:8KB;火狐:7KB;IE:2KB......)
    超过限制长度的部分,浏览器会自动截取掉,导致传递给服务器的数据缺失
   >理论上POST请求通过请求主体传递是没有大小限制的,真实项目中为了保证传输的速率,我
    们也会限制大小(例如:上传的资料或者图片我们会做大小的限制)
  >2.GET请求很容易出现缓存(这个缓存不可控:一般我们都不需要),而POST不会出现缓存(除非自己做特殊处理)  
   >原因:GET是通过URL问号传参传递给服务器信息,而POST是设置请求主体的;
   >设置请求主体不会出现缓存,但是URL传递参数就会了
   举例如下:
         //=>每隔一分钟重新请求服务器端最新的数据,然后展示在页面中(页面中某些实时刷新)
         setTimeout(()=>
         {
         $.ajax({
            url:'getList?
            lx=news&_='+Math.random(),
            ......
            //=>success:function(result){
                success:result=>{ }
            //=>第一次请求数据回来,间隔一分钟后,浏览器又发送一次请求,但是新发送的请求,
                不管是地址还是传递的参数都和第一次一样,浏览器很有可能会把上一次的数据获取,
                 而不是获取最新的数据
            //=>解决方案:每一次重新请求的时候,在URL的末尾追加一个随机数,保证每一次请求
                    的地址不完全一致,就可以避免是从缓存中读取的数据       
            
         });    
         },60000);
 >3.GET请求没有POST请求安全(POST请求也并不是十分安全,只是相对安全)
 >原因:还是因为GET是URL传参给服务器,
 >有一种比较简单的黑客技术:URL劫持,也就是可以把客户端传递给服务器的数据劫持掉,导致信息泄露
 
 
 ...
 >URL:请求数据的地址(API地址),真实项目中,后台开发工程师一般都会编写一个API文档,在
      API文档中汇总,想获取那些数据需要使用哪些地址,我们按照文档操作即可
 >ASYNC:异步(SYNC同步),设置当前AJAX请求是异步的还是同步的,不写默认是异步的(TRUE)
         ,如果设置为FALSE,则代表当前请求是同步的    
 >用户名和密码:这两个参数一般不用,如果你请求的URL地址所在的服务器设定了访问权限,则需
         要我们提供可通行的用户名和密码才可以(一般服务器都是可以允许匿名访问的)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值