AJAX的使用

已于 2023-06-14 21:30:06 修改
阅读量1.5k 收藏 5
点赞数
分类专栏： AJAX 文章标签： ajax javascript
于 2023-05-30 21:27:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hzg_hou/article/details/130956840
版权

总结

  1. ajax使用步骤：

  • 1.创建XMLHttpRequest的实例对象
  let xhr = new XMLHttpRequest();
  • 2.打开与服务器之间的通道
  xhr.open(method, url,async);

其中：
method：请求方式
url：服务端的请求路径
async:是否异步请求（true：异步；false：同步）第三个参数可以省略 默认是true 异步

  • 3.发送请求
  xhr.send()

注意：get请求不传参数，只有post请求需要传递实体数据

  • 4.监听服务器的请求状态
    利用事件onreadystatechange完成回调

输出响应体数据结果
接收服务端响应到客户端的结果数据，可以有两种方式：response、responseText
如果服务端响应的数据为基本类型，那么使用response或者是responseText均可
如果服务端响应的数据为JSON对象的话，
方法1. 使用response获取对象数据，但是有一个前提需要设置响应数据类型为json xhr.responseType = 'json';
方法2. 使用responseText获取对象数据，那么无需设置响应数据类型，则需要手动通过JSON.parse方法将得到的JSON字符串转换成JSON对象 JSON.parse(xhr.responseText)

	//xhr.readyState 不同位置的状态
	
 	let xhr = new XMLHttpRequest();
    console.log(xhr.readyState); //0
    xhr.open('get', 'http://127.0.0.1:8080/users/time?title="标题1"&content="内容一"&time=' + Date.now())
    console.log(xhr.readyState)//1
    xhr.send(); 
    console.log(xhr.readyState);//1 发送后需要时间请求所以是1
    xhr.onreadystatechange = () => {
      console.log(xhr.readyState);//2 3 4
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status <= 300) {
          console.log(xhr.responseText)
        }
      }
    }
    
  xhr.onreadystatechange = function (){
  	//根据xhr对象的状态来进行判断
      //readyState:是xhr对象中的一个属性，属性值为0,1,2,3,4
      //0:表示xhr对象的建立初始化（实例化之后，open之前）
      //1:表示调用了open，完成了打开请求（open之后，send之前）
      //2:表示调用了send，完成了发送请求（send方法已经调用，但是当前的状态以及http头未知）
      //3:表示正在返回数据中
      //4:所有的数据完全响应完毕
      if(xhr.readyState: == 4){
          //status:xhr中的一个属性，表示响应状态码
          if(xhr.status == 200){
          	  console.log(xhr.response);//表示响应体的结果
              console.log(xhr.responseText);//表示响应体的结果
              console.log(xhr.status); //输出响应状态码
              console.log(xhr.statusText); //响应状态字符串
              console.log(xhr.getAllResponseHeaders());//获取所有响应头
              //得到某一个响应头信息
              console.log(xhr.getResponseHeader('Content-Type'))
              console.log(xhr.getResponseHeader('content-length'))
          }
      }
  }

  1. post请求需要设置请求头

    XMLHttpRequest.setRequestHeader(header,value)

    设置 HTTP 请求头的值。必须在 open() 之后、send() 之前调用 setRequestHeader() 方法

    header: 规定头的名称
    value: 规定头的值

目前接触到的常见头：
Content-Type:text/html;charset=utf-8 => 传送的内容既可以是普通文本，也可以是带标签的文本（可以理解为类似于JS中的innerHTML）
Content-Type:text/plain;charset=utf-8 => 传送的内容为普通文本（可以理解为类似于JS中的innerText）
Content-Type:application/json;charset=utf-8 => 传送的数据格式为json对象 {键名:键值,键名:键值}
Content-Type:application/x-www-form-urlencoded;charset=utf-8 => post请求字符串格式：参数名=值&参数名=值

//post请求头为form设置请求头：（用来模拟form表单提交）
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

  1. ajax请求超时 超时会自动取消接口

xhr.timeout = 2000;  //2秒钟之内需要有响应，如果没有响应则执行超时函数
xhr.ontimeout = function () {
	alert('不好意思，请求超时了，请等待重试！！');	
}

  1. ajax取消请求

	xhr.abort();//取消请求

在这里插入图片描述

跨域设置

  app.get('/server',(request,response)=>{
      //允许来自于不同的主机来向我发送跨域请求，必须设置
      response.setHeader('Access-Control-Allow-Origin','*');
      //允许在请求过程中客户端添加自定义请求头，如果不添加只能使用http中默认的一些请求头
      //例如：想要添加a:100就不行，所以这句话需要设置上
      response.setHeader('Access-Control-Allow-Headers','*'); 
      //允许所有的请求方法
      response.setHeader('Access-Control-Allow-Methods','*'); 
      //设置响应体
      response.end('server');
  });

ajax在IE中的缓冲问题以及解决方法

在IE浏览器中只要成功的请求响应过结果一次，就会将结果缓存在浏览器中，即使服务端响应的结果更新了；

客户端请求到的数据仍然是上一次的结果，解决办法只需要每一次发送请求时添加时间戳。

	xhr.open('get', 'http://127.0.0.1/server?time=' + Date.now());

设置CORS跨域


 app.get('/server',(request,response)=>{
      //允许来自于不同的主机来向我发送跨域请求，必须设置
      response.setHeader('Access-Control-Allow-Origin','*');
      //允许在请求过程中添加自定义请求头，如果不添加只能使用http中默认的一些请求头
      //例如：想要添加a:100就不行，所以这句话需要设置上
      response.setHeader('Access-Control-Allow-Headers','*'); 
      //设置响应体
      response.end('server');
  });

ajax同步的方法

let xhr = new XMLHttpRequest();
xhr.open('get', 'http://127.0.0.1:8080/users/time?title="标题1"&content="内容一"&time=',false)
xhr.send();
console.log(xhr.responseText)

AJAX

一、什么是ajax 阿贾克斯

ajax全称为Asynchronous javascript and xml，就是异步的js和xml；

目的是通过ajax可以在浏览器中向服务器发送异步请求，而最大的优势就是可以整体页面无刷新的获取数据；

ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式（JS中的一种API + 发送的http请求）。

例如：百度关键词搜索、用户名的唯一性验证、新闻的异步加载

二、什么是XML

XML是一种可扩展标记语言，用来被设计传输和存储数据；

和HTML类似，不同的是，HTML都是预定义标签，XML中全都是自定义标签来表示一些数据。

例如：

有一组学生的数据：

var name = "孙悟空";
var age = 18;
var gender = "男";

用XML表示：

<student>
	<name>孙悟空</name>
    <age>18</age>
    <sex>男</sex>
</student>
<student>
	<name>猪八戒</name>
    <age>20</age>
    <sex>男</sex>
</student>

<stu>
	<xingming a="1">张三</xingming>
</stu>

当然，现在已经被JSON格式所取代了。

{"name":"孙悟空","age":18,"gender":"男"}

三、使用原生的AJAX

核心对象：XMLHttpRequest，AJAX的所有操作都是通过该对象进行的。

3.1 使用步骤

  • 创建XMLHttpRequest的实例对象
  var xhr = new XMLHttpRequest();
  • 设置请求信息
  xhr.open(method, url);

其中：

method：请求方式

url：服务端的请求路径

  • 发送请求
  xhr.send()

注意：get请求不传参数，只有post请求需要传递实体数据

  • 接收响应

    利用事件onreadystatechange完成回调

  xhr.onreadystatechange = function (){
  	//根据xhr对象的状态来进行判断
      //readyState:是xhr对象中的一个属性，属性值为0,1,2,3,4
      //0:表示xhr对象的建立初始化
      //1:表示调用了open，完成了打开请求
      //2:表示调用了send，完成了发送请求
      //3:表示正在返回数据中
      //4:所有的数据完全响应完毕
      if(xhr.readyState: == 4){
          //status:xhr中的一个属性，表示响应状态码
          if(xhr.status == 200){
              console.log(xhr.responseText);//表示响应体的结果
              console.log(xhr.status); //输出响应状态码
              console.log(xhr.statusText); //响应状态字符串
              console.log(xhr.getAllResponseHeaders());//获取响应头
          }
      }
  }

3.2 ajax的初体验

案例：点击按钮发送ajax请求

<body>
    <button>点击发送一个ajax的get请求</button>
    <script>
        //1.获取DOM元素对象
        let btn = document.querySelector('button');
        //2.设置事件回调
        btn.onclick = ()=>{
            //3.创建ajax对象
            let xhr = new XMLHttpRequest();
            //4.打开请求
            xhr.open('get','http://127.0.0.1/server');
            //5.发送请求
            xhr.send();
            //6.客户端接收服务端的响应
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        console.log(xhr.responseText);
                    }
                }
            }
        }
    </script>
</body>

//1.引入express
const express = require('express');
//2.创建express对象
const app = express();
//3.设置请求url
app.get('/server',(request,response)=>{
    //允许来自于不同的主机来向我发送跨域请求，必须设置
    response.setHeader('Access-Control-Allow-Origin','*');
    response.send('hello ajax');
})
//4.监听端口并启动服务
app.listen(80,()=>{
    console.log('80端口已经启动');
})

3.3 ajax的GET传参问题

  • 在请求的url中传递参数
http://127.0.0.1/server?vip=1&keyword=abc&price=2000
  • 引入fs模块
const fs = require('fs');
  • 添加express的全局中间件
app.use(function(request,response,next){
	fs.writeFileSync('./access.log',request.url + "\r\n");
	next();
});

案例：仿留言板发送请求数据

<body>
    <p>昵称：<input type="text" id="user" /></p>
    <p>信息：<textarea cols="30" rows="10" id="content"></textarea></p>
    <p><button id="sendBtn">发送</button></p>
    <script>
        //1、获取元素对象
        let sendBtn = document.querySelector('#sendBtn');
        //2、绑定事件
        sendBtn.addEventListener('click', () => {
            //3、获取表单信息
            let nickName = document.querySelector('#user').value;
            let content = document.querySelector('#content').value;
            //4、ajax发送请求
            let xhr = new XMLHttpRequest();
            xhr.open('get', `http://127.0.0.1/server?nickName=${nickName}&content=${content}`);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        console.log(xhr.responseText);
                    }
                }
            }
        });
    </script>
</body>

//引入express
const express = require('express');
//创建服务对象
const app = express();

//引入fs文件系统模块
const fs = require('fs');

//添加express的全局中间件
app.use((request,response,next)=>{
    //创建文件保存客户端传递的请求参数数据
    //服务端接收客户端传递的请求参数数据
    console.log(request.url);
    fs.writeFileSync('./data.log', decodeURI(request.url) + '\r\n',{flag:'a'});
    next();
});

//创建路由规则
app.get('/server',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');    
    response.send('ajax请求');
});
//监听端口
app.listen(80,()=>{
    console.log('80端口正在启动中...ing');
});

3.4 ajax请求头与请求体的设置

如何发送post请求

<style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
</style>

<body>
    <div></div>
    <script>
        //1、获取元素
        let div = document.querySelector('div');
        //2、绑定事件
        div.onclick = function () {
            //3、创建ajax对象
            const xhr = new XMLHttpRequest();
            xhr.open('post', 'http://127.0.0.1/server');
            //4、设置请求头
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            //5、设置请求体数据
            xhr.send('vip=9&wd=abc');

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //将响应体的结果在div中呈现
                        div.innerText = xhr.responseText;
                    } else {
                        alert('请求失败');
                    }
                }
            }
        }
    </script>
</body>

3.5 ajax在IE中的缓冲问题以及解决方法

在IE浏览器中只要成功的请求响应过结果一次，就会将结果缓存在浏览器中，即使服务端响应的结果更新了；

客户端请求到的数据仍然是上一次的结果，解决办法只需要每一次发送请求时添加时间戳。

xhr.open('get', 'http://127.0.0.1/server?time=' + Date.now());

3.6 ajax中json格式数据的处理

mime类型：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

需求：文本框失焦时发送ajax请求

3.6.1 手动转换
<body>
    <input type="text">
    <span></span>
    <script>
        //1、获取元素
        let ipt = document.querySelector('input');
        let span = document.querySelector('span');
        //2、绑定失焦事件
        ipt.onblur = function () {
            //3、发送ajax请求
            const xhr = new XMLHttpRequest();
            xhr.open('get', 'http://127.0.0.1/json-server');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //将json字符串转换成json对象
                        const data = JSON.parse(xhr.responseText);
                        //判断
                        if (data.errno == 1) {
                            ipt.style.border = "1px solid red";
                            span.innerText = data.errmsg;
                        }

                    }
                }
            }
        }
    </script>
</body>

app.get('/json-server',(request,response)=>{
    //响应结果 json格式的响应体
        let data = {
            errno : 1,
            errmsg : '用户名已经存在'
        }
    //将json对象转换成json字符串
    let str = JSON.stringify(data);
    //允许来自于不同的主机来向我发送跨域请求，必须设置
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.end(str);
});
3.6.2 自动转换

第一步：预先设置响应体的结果类型为json

xhr.responseType = 'json';

第二步：获取响应体数据使用response

console.log(xhr.response); #在这里response会根据设置类型自动变化；responseText始终为响应字符串

案例1：网络列表数据的获取

<body>
    <button>点击获取数据列表</button>
    <ul></ul>
    <script>
        //获取元素
        let btn = document.querySelector('button');
        let ul = document.querySelector('ul');
        //2、绑定事件
        btn.addEventListener('click', () => {
            const xhr = new XMLHttpRequest();
            xhr.responseType = 'json';
            xhr.open('get', 'http://iwenwiki.com/api/blueberrypai/getIndexTravelnote.php');
            xhr.send();
            xhr.onreadystatechange = function () {
                //判断
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        let data = xhr.response;
                        data.travelnote.forEach(item => {
                            //创建li节点对象
                            let liNode = document.createElement('li');
                            //修改li标签的文本
                            liNode.innerText = item.title
                            //ul追加
                            ul.appendChild(liNode);
                        })
                    }
                }
            }
        });
    </script>
</body>

案例2：天气数据的查询

注：http://tianqiapi.com/ 需要提前注册

    <style>
        #result {
            width: 300px;
            height: 200px;
            border: 1px solid #222;
        }
    </style>
</head>

<body>
    <input type="text">
    <button>点击查询</button>
    <hr>
    <div id="result"></div>
    <script>
        //1、获取元素对象
        let ipt = document.querySelector('input');
        let btn = document.querySelector('button');
        let result = document.querySelector('#result');
        //2、绑定事件
        btn.addEventListener('click', () => {
            let cvalue = ipt.value;
            //3、创建ajax请求
            let xhr = new XMLHttpRequest();
            xhr.responseType = 'json'
            xhr.open('get', 'https://spot.yiketianqi.com/?action=city&appid=82294778&appsecret=4PKVFula&province=%E5%B9%BF%E4%B8%9C&city=%E6%B7%B1%E5%9C%B3');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        let data = xhr.response;
                        console.log(data);
                    }
                }
            }
        })
    </script>
</body>

3.7 ajax请求超时

xhr.timeout = 2000;  //2秒钟之内需要有响应，如果没有响应则执行超时函数
xhr.ontimeout = function () {
	alert('不好意思，请求超时了，请等待重试！！');
}

3.8 ajax取消请求

<body>
    <button id="timeout">发送超时请求</button>
    <button id="cancel">取消请求</button>
    <script>
        //1、获取元素
        let timeout = document.querySelector('#timeout');
        let cancel = document.querySelector('cancel');
        let xhr; //注意这里不能使用const，因为需要有初始化的值
        //2、绑定事件
        timeout.onclick = function () {
            //也可以判断是否正在发送
            if (xhr) {
                xhr.abort();
            }
            //3、发送ajax请求
            xhr = new XMLHttpRequest();
            xhr.open('get', 'http://127.0.0.1/delay-server');
            xhr.send();
            //超时时间设置
            xhr.timeout = 3000;
            xhr.ontimeout = function () {
                alert('对不起 请求超时 请重试');
            }
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        console.log(xhr.response);
                    }
                }
            }
        }


        cancel.onclick = function () {
            xhr.abort();
        }

    </script>
</body>

app.get('/delay-server',(request,response)=>{
    setTimeout(()=>{
        response.send('delay');
    },3000);
});

四、ajax的请求跨域问题

4.1 同源策略

同源策略(Same-Origin Policy)最早由Netspace公司提出，是浏览器的一种安全策略。

同源是指协议、域名、端口号都必须完全相同，两个资源必须来自于同一个服务，

如果违背上述任何一个条件就是跨域。

4.2 如何解决跨域

4.2.1 JSONP
  • JSONP是什么

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，

纯粹凭借程序员的聪明才智开发出来，只支持get请求。

  • JSONP怎么工作的？

在网页有一些标签天生具有跨域能力，比如 img、link、iframe、script

JSONP就是利用script标签的跨域能力来发送请求的。

  • JSONP的使用

    动态的创建一个script标签

  var script = document.createElement('script');

设置script的src，设置回调函数

  script.src = "http://127.0.0.1/jsonp-server?cb=handler";
  function handler(data) {
  	console.log(data);
  };

将script添加到body中

  document.body.appendChild(script);

在服务端定义url路由规则

app.get('/jsonp-server',(request,response)=>{
	let data = '此用户名已经存在';
	let cb = request.query.cb;
	response.end(`${cb}("${data}")`);
})

案例：客户端发送jsonp跨域请求

<body>
	<button>发送jsonp跨域请求</button>
	<p></p>
	<script>
    	//声明一个函数（回调函数），函数的作用是对响应体结果进行处理
    	function handler(data){
    		//将响应结果显示到p标签中
    		document.querySelector('p').innerHTML = data;
		}
    	let btn = document.querySelector('button');
		btn.onclick = function(){
            //创建script标签
            let script = document.createElement('script');
            //修改script标签的src属性
            script.src = "http://127.0.0.1/jsonp-server?cb=handler";
            //将script标签添加到body中
            document.body.appendChild(script);
        }
    </script>
</body>

  • jquery发送JSONP请求

    <head>
    <title>jquery发送jsonp请求</title>
	<script type="text/javascript" src="./jquery-1.12.4.js"></script>    
</head>
<body>
	<button>jquery发送jsonp请求</button>
	<script>
    	//获取元素对象
    	let btn = document.querySelector('button');
		//绑定事件
		btn.onclick = function(){
            $.getJSON('http://127.0.0.1/jsonp-server?cb=?',function(data){
                console.log(data);
            })
        }
    </script>
</body>
4.2.2 CORS

  • 什么是CORS

    CORS（Cross-Origin Resource Sharing），跨域资源共享。

    CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，

    完全在服务器中进行处理，支持get和post请求。

  • CORS是如何工作的

    CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

  • CORS的使用

    只需要在服务端中设置响应头

  app.get('/server',(request,response)=>{
      //允许来自于不同的主机来向我发送跨域请求，必须设置
      response.setHeader('Access-Control-Allow-Origin','*');
      //允许在请求过程中添加自定义请求头，如果不添加只能使用http中默认的一些请求头
      //例如：想要添加a:100就不行，所以这句话需要设置上
      response.setHeader('Access-Control-Allow-Headers','*'); 
      //设置响应体
      response.end('server');
  });
学不死就往死里学
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生ajax使用
11-29
本代码是原生ajax使用demo，详情请查看博客 原生Ajax使用笔记
jQuery ajaxForm()的应用
01-19
jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程。本文就是介绍了ajaxForm()的应用. 一、ajaxForm() 介绍 ajaxForm预处理将要使用 AJAX  方式提交的表单，将所有需要用到的事件监听器添加到其中。它不是提交这个表单。 在页面的ready函数里使用ajaxForm来给你页面上的表单做这些AJAX提交的准备工作。 ajaxForm 需要零个或一个参数。这唯一的一个参数可以是一个回调函数或者是一个可选参数对象。 是否可以连环调用:
前端Ajax请求从后端获取二进制文件并下载
最新发布
近10年前端开发工作经验，为你分享日常经验所得
03-25 1111
大家都知道前端的下载除了最简单的a标签href，还有时候需要验证token，此时后台会给一个返回二进制的下载接口。如果你用ajax普通的get，post请求，接口会返回乱码。那么本文就带你封装一个处理二进制下载的方法。
ThinkPHP中ajax使用实例教程
10-25
主要介绍了ThinkPHP中ajax使用, 是ThinkPHP开发中非常实用的技巧,需要的朋友可以参考下
ajaxForm插件
07-10
ajaxForm插件
Ajax使用示例
12-07
Ajax使用示例完整项目代码，参考博客：http://blog.csdn.net/daijin888888/article/details/51208570
$.ajax中设置responseType
热门推荐
baidu_38027860的博客
02-27 2万+
最近在为公司产品新增一个音频播放及整体波形预览的功能，首先需要的就是请求音频地址，将请求到的二进制原始数据转换为arrayBuffer类型，之后在通过Web Audio Api解码以此来生成波形展示所需数据，于是问题来了。 如果用原生xhr是可以直接设置responseType属性的，但是因为是公司产品，底层封装的是jquery的ajax方法，然而$.ajax没有respons...
AJAX
花铛
03-13 1049
Ajax： Async JavaScript And XML，异步 JavaScript 和 XML。是浏览器与服务器之间的一种异步通信方式。其实质是使用 XMLHttpRequest 对象异步地向服务器发送请求，服务器返回部分数据，而不是一个完整的页面。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行异步更新。Ajax 中的异步：可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情，直到成功获取响应后，浏览器才开始处理响应数据。......
xhr对象的属性
weixin_48764380的博客
03-11 1302
原生ajax请求，XMLHttpRequest（）实例化对象xhr的相关属性学习
XHR-XMLHttpRequest
顺其自然~专栏
02-18 1765
XMLHttpRequest 对象是 Ajax 的关键。它从 2000 年 7 月发布的 IE 5.5 开始可用，但是直到 2005 年 Ajax 和 Web 2.0 变得流行起来它都没有完全被发觉。 XMLHttpRequest (XHR) 是一个可以用 JavaScript，JScript，VBScript 和其他 Web 浏览器脚本语言传输和操作 XML 数据，以及使用 HTTP 从 Web 服务器上在网页客户端和服务端之间建立一个独立连接通道的 API。 调用 XMLHttpRequest 返回
有关ajax请求的responseType以及withCredentials
qq_39077561的博客
07-16 7587
一、reponseType 1、什么是reponseType XMLHttpRequest.reponseType属性是一个枚举类型的属性,返回响应数据的类型,他允许我们手动的设置 返回数据的类型。如果我们将它设置为一个空字符串,它将默认的使用"text"类型。 当将reponseType设置为一个特定的类型的时候需要确保服务器所返回的类型和所设置的返回值类型是 兼容的。如果两者不兼容,...
ajax使用实例
03-17
对于初学者而言学ajax是不错的资源
jquery ajaxform
09-04
无刷新执行form提交，不同于jquery easyui官方版本，使用方法参见http://jquery.malsup.com/form/
Ajax（Ajax使用js包）
02-27
使用Ajax实现从服务器读取数据，包括Ajax实现的详细步骤
TinyMCE提交AjaxForm获取不到数据的解决方法
12-13
本文实例分析了TinyMCE提交AjaxForm获取不到数据的解决方法。分享给大家供大家参考。具体分析如下： 在没有使用AjaxForm前，我做的一个小小的评论提交的Web form，评论内容使用了TinyMCE做文本编辑。为了增加一点点的用户体验，就顺手拿AjaxForm来实现Ajax提交。可是发现出现了一个意外的事情。就是每次提交，第一次提交时，AjaxForm会无法获得当前编辑的评论内容，即TextArea里面的内容，要再点击一次提交，才能将TextArea的内容提交上去。 关键是TinyMCE上的内容没有在提交前更新到TextArea中。于是想看看AjaxForm是否有在提交前的事件绑
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
10-21
下面小编就为大家带来一篇浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ajax使用教程
05-08
想要入门学习ajax的同学可以看看，里面有请求格式，对浏览器支持，还有具体的案列代码；
Ajax和$.ajax使用实例详解(推荐)
10-20
本文通过三个实例给大家讲解了Ajax和$.ajax使用实例详解，非常不错，具有参考借鉴价值，需要的朋友参考下
jQuery Ajax使用实例
10-24
主要介绍了jQuery Ajax使用实例,本文讲解了$.ajax的一般格式、$.ajax的参数描述、$.ajax需要注意的一些地方、$.ajax我的实际应用例子,需要的朋友可以参考下
ajax使用session完成强制登录
03-30
Ajax是一种用于创建动态Web应用程序的Web开发技术。在使用Ajax时，可以使用session完成强制登录。下面是一个简单的示例，演示如何使用Ajax和session实现强制登录。 HTML代码： ```html <!DOCTYPE html> <html> <head> <title>Ajax Session Demo</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function() { // 检查用户是否登录 $.ajax({ url: "check_login.php", success: function(response) { // 如果用户没有登录，则跳转到登录页面 if (response == "false") { window.location.href = "login.php"; } } }); }); </script> </head> <body> <h1>Ajax Session Demo</h1> <p>这是一个演示如何使用Ajax和session实现强制登录的示例。</p> </body> </html> ``` 在上面的HTML代码中，我们使用Ajax向服务器发送一个请求，检查用户是否已经登录。如果用户没有登录，则跳转到登录页面。 PHP代码： ```php <?php session_start(); if (isset($_SESSION["username"])) { echo "true"; } else { echo "false"; } ?> ``` 在上面的PHP代码中，我们使用session判断用户是否已经登录。如果用户已经登录，则返回true，否则返回false。 当用户访问HTML页面时，JavaScript代码会自动向check_login.php发送一个Ajax请求。如果用户已经登录，则返回true，否则返回false。如果返回false，则JavaScript代码将自动跳转到登录页面。这样就可以实现强制登录了。 需要注意的是，为了能够使用session，必须在每个PHP文件的开头调用session_start()函数。这样才能够在不同的PHP文件中共享session。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值