使用Ajax请求数据

最新推荐文章于 2023-07-07 09:19:59 发布

Czm_cc

最新推荐文章于 2023-07-07 09:19:59 发布

阅读量1.1k

点赞数

文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/Czm_cc/article/details/120598392

版权

1. 请求文本类型的数据（jQuery方法）

 $("button").on("click",function(){
    jQuery.ajax({
         type : "get",//默认为get请求
         url : "http://localhost:9999/01.txt", //请求的地址
         dataType : "text", // 请求文本类型数据
         success : function(data){
             console.log(data) //返回响应数据
         },
         error :function(err){
             console.log(err)//返回为错误对象，其中会包含错误信息
         }
     })
 })

在这里插入图片描述

2. 请求json类型数据（jQuery方法）

 $("button").on("click",function(){
    jQuery.ajax({
         type : "get",//默认为get请求
         url : "http://localhost:9999/01.json", //请求的地址
         dataType : "json", // 请求文本类型数据
         success : function(data){
             console.log(data) //返回响应数据
         },
         error :function(err){
             console.log(err)//返回为错误对象，其中会包含错误信息
         }
     })
 })

在这里插入图片描述

3. 延时请求

   if(window.XMLHttpRequest){
     	var xhr = new XMLHttpRequest() //普通浏览器
   }else{
        var xhr = new ActiveXObject()  //兼容老版本IE浏览器
   }
   if(xhr.readyState == 4){  //状态码为4 服务器数据已经完全接收，或者本次接收已经失败了
      if(xhr.status == 200){  // 响应码为200 访问正常
          console.log(xhr.responseText)
      }
   }
   xhr.timeout = 5000;		//5秒后，请求超时后，停止请求
   xhr.ontimeout = function(){
       console.log("请求超时，请稍后再试")
   }
   xhr.open("get","03.php",true) //建立连接
   xhr.send() //发送HTTP请求