ajax学习笔记

最新推荐文章于 2024-08-31 15:57:06 发布
最新推荐文章于 2024-08-31 15:57:06 发布
阅读量342 收藏
点赞数
分类专栏： Java 文章标签： ajax javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QXK_Jack/article/details/122318155
版权

1、get

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset = "utf-8">
        <meta name="viewpoint" content="width=device-width,initial-scale=1.0"> 
        <title>Document</title>    
    </head>
    <body>
        <button onclick="sendMsg()">发送请求</button>
        <div></div>
        <script>
            function sendMsg()
            {
                //1.创建一个XMLHTTPRequesrt对象
                var xhr = new XMLHttpRequest();
                //2.调用open方法打开连接
                //open方法有三个:请求的method，请求的url，是否异步（默认异步true）
                xhr.open('get','./data.php?id=1')
                //3.发送请求
                xhr.send()
                //4.监听状态的改变
                xhr.onreadystatechange = function()
                {
                    //判断状态值，0~4这5种状态，4代表完成
                    if(xhr.readyState == 4)
                    {
                        //判断状态码
                        if(xhr.status == 200)
                        {
                            var resp = JSON.parse(xhr.responseText)
                            console.log(resp)
                            document.querySelector('div').innerHTML = `
                                <h2>编号:${resp.id}</h2>
                                <h2>标题:${resp.title}</h2>
                            ` 
                        }
                    }
                }
            }
        </script>
    </body>
</html>
<?php
    $id = $_GET['id'];
    //echo 'hello ajax';
    echo json_encode(array('id'=>$id,'title'=>'hello'));
?>

2、post

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset = "utf-8">
        <meta name="viewpoint" content="width=device-width,initial-scale=1.0"> 
        <title>Document</title>    
    </head>
    <body>
        <button onclick="sendMsg()">发送请求</button>
        <div></div>
        <script>
            function sendMsg()
            {
              var xhr = new XMLHttpRequest();
              //这里method传post
              xhr.open('post','./datapost.php')
              //设置请求头的content-type
              xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
              xhr.send('name=zhangsan&age=18')
              xhr.onreadystatechange = function()
              {
                  if(xhr.readyState === 4)
                  {
                      if(xhr.status === 200)
                      {
                          var resp = JSON.parse(xhr.responseText)
                          console.log(resp)
                          document.querySelector('div').innerHTML = `
                                <h2>姓名:${resp.name}</h2>
                                <h2>年龄:${resp.age}</h2>
                                <h2>money:${resp.money}</h2>
                          `
                      }
                  }
              }
            }
        </script>
    </body>
</html>
<?php
    $name = $_POST['name'];
    $age = $_POST['age'];
    // echo 'hello ajax';
    echo json_encode(array(
        "name" => $name,
        "age" => $age,
        "money" => 9999999
    ));
?>

3、合并

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset = "utf-8">
        <meta name="viewpoint" content="width=device-width,initial-scale=1.0"> 
        <script src="./util.js"></script>
        <title>Document</title>    
    </head>
    <body>
        <button onclick="sendMsg()">发送请求</button>
        <script>
            function sendMsg()
            {
                // util.get('./data3.php',{id:3,title:'lisi'},function(resp){console.log(resp)},true)
                // util.post('./data32.php',{id:3,title:'lisi'},function(resp){console.log(resp)},true)
                util.ajax({
                    method:'get',
                    url:'./data3.php',
                    query:{id:3,title:'wangwu'},
                    callback:function(resp){console.log(resp)},
                    isJson:true
                })
            }
           
        </script>
    </body>
</html>
ajax

var util = {
    get: function (url, query, callback, isJson) {
        //如果有参数，先把参数凭借再url后面
        if (query) {
            url += '?'
            for (var key in query) {
                url += `${key}=${query[key]}&`
            }
            //去除多余得&符号
            url = url.slice(0, -1)
        }
        var xhr = new XMLHttpRequest
        xhr.open('get', url)
        xhr.send()
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    var res = isJson ? JSON.parse(xhr.responseText) : xhr.responseText
                    callback(res)
                }
            }
        }
    },
    post: function (url, query, callback, isJson) {
        //如果有参数，把参数拼接起来
        var str = ''
        if (query) {
            for (var key in query) {
                str += `${key}=${query[key]}&`
            }
            //去除多余得&符号
            str = str.slice(0, -1)
        }
        var xhr = new XMLHttpRequest
        xhr.open('post', url)
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send(str)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    var res = isJson ? JSON.parse(xhr.responseText) : xhr.responseText
                    callback(res)
                }
            }
        }
    },
    // params:object :{method,url,query,calllback,isJson}
    ajax: function (params) {
        var xhr = new XMLHttpRequest()
        if (params.method.toLowerCase() === 'get') {
            if (params.query) {
                params.url += '?'
                for (var key in params.query) {
                    params.url += `${key}=${params.query[key]}&`
                }
                params.url = params.url.slice(0, -1)
            } 
            xhr.open('get', params.url)
            xhr.send()
        } else {
            //post
            var str = ''
            if (params.query) {
                for (var key in params.query) {
                    str += `${key}=${params.query[key]}&`
                }
                str = str.slice(0, -1)
            }
            xhr.open('post', params.url)
            
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            xhr.send(str)
        }
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    var resp = params.isJson ? JSON.parse(xhr.responseText) : xhr.responseText
                    params.callback(resp)
                }
            }
        }
    }
}

QXK_Jack
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
服务器axios响应慢,axios请求问题总结
weixin_33985453的博客
08-04 2872
一般现在请求接口都会使用axios，方便而且比较简洁，下面总结了一套比较通用的请求方法以及报错机制代码如下：处理一遍数据结构的then方法可以根据业务情况自行调整import Axios from 'axios';const axios = Axios.create({timeout: 200000})function ajax(method, url, params) {function r(...
ajax三层封装,最严谨的ajax请求封装
weixin_42611177的博客
08-05 262
一、封装ajax封装最严谨的ajax，可直接复制引用ajax.jsfunction sendAjax(obj){/ 先判断url是否传入if(!obj.url){/ 没有传throw new Error('地址必填') / 抛出自定义错误}/ 传入了之后需要验证url是否是字符串if(Object.prototype.toString.call(obj.url) !== '[object Stri...
vue中使用axios+Promise二次封装ajax请求
laishaojiang的博客
07-30 8849
首先先安装axios: 中文文档地址 https://www.kancloud.cn/yunye/axios/234845 安装 使用 npm: $ npm install axios 使用 bower: $ bower install axios 使用 cdn: &lt;script src="https://unpkg.com/axios/dist/axios.min...
jquery 封装的ajax调用
weixin_30824599的博客
12-02 62
(function(){ var Ploy = { Config: { ajaxUrl: "/ajax/ploy.ashx" }, ajax: function(params, callback) { var that = this; $.ajax({ t...
Ajax学习笔记
2301_82244607的博客
04-28 1011
XMLHttpRequest()：创建 XHR 对象的构造函数status：响应状态码值，如 200、404statusText：响应状态文本，如 ’ok‘、‘not found’readyState：标识请求状态的只读属性 0-1-2-3-4onreadystatechange：绑定 readyState 改变的监听responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应response：响应体数据，类型取决于 responseType 的指定。
史上最详细Ajax学习笔记
楠黎倾风的博客
09-19 8011
史上最强Ajax学习笔记
AJAX学习笔记
weixin_44497507的博客
11-10 597
【代码】AJAX学习笔记。
16ajax学习笔记1
08-08
在本篇16ajax学习笔记1中，我们将探讨Ajax的基础概念、使用方法以及jQuery库中的Ajax实现。 1、发送请求： Ajax的首要任务是创建XMLHttpRequest对象，这是浏览器提供的API。在JavaScript中，我们可以通过new ...
jquery中ajax学习笔记4
10-28
### jQuery中Ajax学习笔记4：缓存问题与中文问题详解 #### 缓存问题解析 在Web开发过程中，经常会遇到浏览器缓存导致的数据更新问题。本文档将详细讲解如何识别和解决缓存问题。 ##### 什么是缓存问题？ 缓存...
Ajax学习笔记个人总结
09-12
### Ajax学习笔记个人总结 #### 一、XMLHttpRequest对象简介 **XMLHttpRequest** 对象是 AJAX 技术的核心，它负责在客户端与服务器之间发送异步请求，无需刷新整个页面即可实现局部数据更新。要使用 ...
Web开发 Ajax 2024/3/31
最新发布
yesyesyes_yes的博客
08-31 246
2024/3/21未完待续
jQuery基础——DOM
m0_54066656的博客
08-27 1953
JQ基础——DOM操作
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 1663
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
python12 中，No module named‘distutils‘错误
热门推荐
qq_43557600的博客
08-27 1万+
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
vue ref和reactive区别
灰海
08-25 5793
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 910
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
Ajax学习笔记pink老师
07-29
您好！对于学习Ajax，我可以为您提供一些学习笔记。以下是一份简要的Ajax学习笔记，希望对您有所帮助： 1. 什么是Ajax？ - Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式Web应用程序的技术。 - 它通过在后台与服务器进行数据交换，实现在不刷新整个页面的情况下更新部分页面内容。 2. Ajax的优点： - 异步处理：可以在后台发送和接收数据，而无需刷新整个页面。 - 提高用户体验：通过部分更新页面内容，可以提供更快的响应时间和更流畅的用户体验。 - 减轻服务器负担：只更新需要的部分内容，减少了不必要的数据传输和服务器负载。 3. Ajax的基本原理： - 使用XMLHttpRequest对象向服务器发送请求，并接收响应。 - 通过JavaScript在前端处理响应数据。 - 更新页面内容，以显示最新的数据。 4. Ajax的核心技术： - XMLHttpRequest对象：用于与服务器进行数据交换。 - JavaScript：用于处理响应数据和更新页面内容。 - XML或JSON：用于传输数据格式。 5. Ajax的使用步骤： - 创建XMLHttpRequest对象。 - 定义请求类型、URL和是否异步。 - 发送请求并接收响应。 - 处理响应数据并更新页面内容。 6. 常见的Ajax框架和库： - jQuery：一个流行的JavaScript库，提供了简化Ajax开发的方法和函数。 - Axios：一个基于Promise的HTTP客户端，用于浏览器和Node.js。 - Fetch API：一种用于发送和接收网络请求的新标准。 这只是Ajax学习的一些基本概念和步骤，您可以进一步深入学习Ajax的相关知识和实践。希望这些笔记对您有所帮助！如有更多问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值