JS 实现AJAX封装(只限于异步)

1.AJAX 分为异步 和 同步 请求

      比如你去买一个食品,但是商店暂时没有这个食品

        异步:等到商品有了再来买,这个期间我可以去做别的事;

        同步:一直在这里等,什么时候商品来了,买到手了,再去做别的事;

    下面我写了一个封装的函数,作为了解,使用的话建议使用JQ的AJAX

    

    function Ajaxget(option,fnSucc,fnFaild){
        /*url   请求路径
          getOrPost  get还是post请求
          str        post发送的字符串
         fnSucc      成功函数
         fnFaild     失败函数
        */
        var arument = {
            getUrl : option.url,
            getOrPost : option.getOrPost,
            postSendStr : option.str
        }
        if(window.XMLHttpRequest){
            var xhr = new XMLHttpRequest();
        }else{
            var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if(arument.getOrPost === ‘get‘){
            xhr.open("GET",arument.getUrl,true);
            xhr.send();
        }else if(arument.getOrPost === ‘post‘){
            xhr.open("POST",arument.getUrl,true);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(arument.postSendStr)
        }
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                fnSucc(xhr.responseText)
                // document.write(xhr.responseText);
            }else{
                if(fnFaild){
                     fnFaild();
                }
            }
        }
    }

调用请求部分

    Ajaxget({
         url:‘http://sjz.bokanedu.com/tgr/api/index.aspx?day=4-5&type=bkws‘,
         getOrPost:‘get‘,
         str:‘‘
    },function(e){
         document.write(e);
    },function(){
        console.log(‘失败‘)
    })

请求数据如下:

时间: 2025-01-08 18:42:07

JS 实现AJAX封装(只限于异步)的相关文章

原生js实现ajax封装

一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并在网页上呈现出来. 作用:提高用户体验,减少网络数据的传输量 二.ajax常见运用场景 表单验证是否登录成功.百度搜索下拉框提示和快递单号查询等等. 三.Ajax原理是什么 Ajax请求数据流程,其中最核心的依赖是浏览器提供的对象xhr,它扮演的角色相当于秘书,使得浏览器可以发出HTTP请求与接收H

原生JS模拟JQuery封装Ajax

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

原生JS写Ajax的请求函数

原文:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务器.发送请求.接收响应数据: 下面简单封装一个函数,之后稍作解释 1 ajax({ url: "./TestXHR.aspx", //请求地址 2 type: "POST", //请求方式

原生JS实现AJAX、JSONP及DOM加载完成事件

一.JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务器.发送请求.接收响应数据: 下面简单封装一个函数,之后稍作解释 ajax({ url: "./TestXHR.aspx", //请求地址 type: "POST", //请求方式 data: { name: "super", age: 20 },

原生AJAX封装

回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出! 1 var ajaxHelper = { 2 /*1.0 浏览器兼容的方式创建异步对象*/ 3 makeXHR: function () { 4 //声明异步对象变量 5 var xmlHttp = false; 6 //声明 扩展 名 7 var xmlHttpObj = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.

JS jquery ajax

4.form中的input可以设置为readonly和disable,请问2者有什么区别? readonly不可编辑,但可以选择和复制:值可以传递到后台 disabled不能编辑,不能复制,不能选择:值不可以传递到后台 5.js中的3种弹出式消息提醒(警告窗口,确认窗口,信息输入窗口)的命令式什么? alertconfirmprompt 2.列举Java和JavaScript之间的区别? Java是一门十分完整.成熟的编程语言.相比之下,JavaScript是一个可以被引入HTML页面的编程语言

JS组件系列——封装自己的JS组件

前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一个$("#id").MyJsControl({})做我们自己的组件,我们该如何去做呢,别急,我们慢慢来看看过程. 一.扩展已经存在的组件 1.需求背景 很多时候,我们使用jquery.ajax的方式向后台发送请求,型如 $.ajax({ type: "post", ur

原生JS发送Ajax请求

注意了,划重点了,这一题考不到算我输! 一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心技术当然是XMLHttpRequest对象: ajax请求过程:创建XMLHttpRequest对象.连接服务器.发送请求.接受相应数据. 废话少说上代码! p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0p

jQuery Ajax封装通用类 (linjq)

jQuery Ajax封装通用类 (linjq) $(function(){ /** * ajax封装 * url 发送请求的地址 * data 发送到服务器的数据,数组存储,如:{"date": new Date().getTime(), "state": 1} * async 默认值: true.默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为 false. * 注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行. * t