前端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);
        }
    }
}
相关文章
|
10月前
|
前端开发 JavaScript
AJax(XHR+Get和Post+AJax的封装)
AJax(XHR+Get和Post+AJax的封装)
281 15
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
360 2
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
156 18
|
数据采集 前端开发 JavaScript
虎扑APP数据采集:JavaScript与AJAX的结合使用
虎扑APP数据采集:JavaScript与AJAX的结合使用
|
缓存 前端开发 Java
【前端学java】java基础巩固复习巩固语法练习-工具类的封装(14)
【8月更文挑战第10天】java基础巩固,工具类的封装
135 1
【前端学java】java基础巩固复习巩固语法练习-工具类的封装(14)
|
移动开发 前端开发 JavaScript
js之ajax |12-6
js之ajax |12-6
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理
循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
【7月更文挑战第15天】Python后端(Django/Flask)与前端通过AJAX或Fetch API实现异步交互,提升Web应用体验。Python提供强大的后端支持,AJAX用于不刷新页面的数据交换,Fetch API作为现代标准,基于Promise简化HTTP请求。结合两者,构建高效、流畅的交互系统,优化响应速度和用户体验,开启Web开发新篇章。
312 5
|
JSON 前端开发 JavaScript
跨越跨域大山,前端不得不知道的Ajax
该文章介绍了AJAX技术的基本使用方法,包括GET和POST请求的模拟,并探讨了浏览器同源策略及其对跨域请求的影响,同时还提出了JSONP和CORS作为解决跨域问题的方案。
|
JavaScript 前端开发 网络协议