前端javascript练习题Ajax封装

简介: 前端javascript练习题Ajax封装ajax的基本封装 ----必须掌握function ajax(url,fn){if(window.XMLHttpRequest){ var xhr = new XMLHttpRequest();}else{ var xhr = new ActiveXObject("Microsoft.

前端javascript练习题Ajax封装
ajax的基本封装 ----必须掌握
function ajax(url,fn){

if(window.XMLHttpRequest){
    var xhr = new XMLHttpRequest();
}else{
    var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

xhr.open("get",url,true);
xhr.send();

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            var data = xhr.responseText;
            fn(data);
        }
    }
}}

ajax的完整封装
function ajax(obj){

//obj -> type url data success
var str = "";
for(var key in obj.data){
    str += key+"="+obj.data[key]+"&";
}
//str = str.substring(0,str.length-1);
str = str.replace(/&$/,"");

if(window.XMLHttpRequest){
    var xhr = new XMLHttpRequest();
}else{
    var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

if(obj.type.toUpperCase()=="GET"){
    if(obj.data){
        var url = obj.url + "?" + str;
    }else{
        var url = obj.url;
    }
    
    xhr.open("get",url,true);
    xhr.send();
}
if(obj.type.toUpperCase()=="POST"){
    xhr.open("post",obj.url,true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(str);
}

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            var data = xhr.responseText;
            obj.success(data);
        }
    }
}
相关文章
|
3月前
|
前端开发 数据安全/隐私保护
crypto-js中AES的加解密封装
文章介绍了如何在前端使用crypto-js库进行AES加密和解密,提供了加解密的函数封装示例,并演示了如何加密和解密字符串或对象。
305 1
crypto-js中AES的加解密封装
|
27天前
|
数据采集 前端开发 JavaScript
虎扑APP数据采集:JavaScript与AJAX的结合使用
虎扑APP数据采集:JavaScript与AJAX的结合使用
|
3月前
|
移动开发 前端开发 JavaScript
js之ajax |12-6
js之ajax |12-6
|
3月前
|
设计模式 JavaScript
JS发布订阅模式封装(纯手工)
发布订阅模式是JS常用的设计模式,在面试中也会经常遇到,以下是我的手写实现方式,经测试效果不错,小伙伴们们可以直接拷贝使用。
|
4月前
|
缓存 前端开发 Java
【前端学java】java基础巩固复习巩固语法练习-工具类的封装(14)
【8月更文挑战第10天】java基础巩固,工具类的封装
27 1
【前端学java】java基础巩固复习巩固语法练习-工具类的封装(14)
|
5月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理
循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理
|
5月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
158 24
|
4月前
|
JavaScript 前端开发 网络协议
|
4月前
|
JavaScript 前端开发 安全
js之AJAX
js之AJAX
35 0
|
5月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch('url').then(r => r.json()).then(data => console.log(data)).catch(err => console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
105 0