在js中创建ajax

最新推荐文章于 2022-07-27 21:14:45 发布

limit for me

最新推荐文章于 2022-07-27 21:14:45 发布

阅读量211

点赞数

分类专栏： js 文章标签： ajax

本文链接：https://blog.csdn.net/limmt2020/article/details/118553771

版权

js 专栏收录该内容

44 篇文章 5 订阅

订阅专栏

在js中创建ajax

xhr.html页面四步法

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style></style>
</head>
<body>
  <script>
  //1.(创建异步对象)
    //兼容性的创建对象,在非低版本IE下存在window.XMLHttpRequest属性
    if (window.XMLHttpRequest) {
      //非低版本IE浏览器会执行以下这句代码
      var xhr=new XMLHttpRequest();
    }else
    {
      //IE5 IE6浏览器会执行以下这句代码
      var xhr=new ActiveXObject('Microsoft.XMLHTTP');
    }

  xhr.onreadystatechange = function(){
  console.log(xhr.readyState)
  if(xhr.readyState == 4){
    //出了readyState==4之外查看是否接通给你的状态码 状态码需要在200-300之间 不包括300 表示成功收到
    if(xhr.status >=200 && xhr.status<300){
      //后台的返回是正常的并且是同意的
      var result=xhr.responseText;
      console.log(result);
      }else{
      //后台返回不正常如500,404非成功状态
      alert('返回失败！')
    }
  }
}
  //2.创建异步请求
    xhr.open('GET',"http://localhost:5000",true);
  //3.发送异步请求
    xhr.send();
  //4.等待响应结果

  </script>
</body>

</html>

创建一个本地服务器js文件

var http=require('http');
//创建的假数据
var result={
  "code":1,
  "message":"成功",
  "data":{
    "names":"tom",
    "age":20
  }
}
var server=http.createServer((req,res)=>{
  //添加响应头解决跨域
  res.setHeader('Access-Control-Allow-Origin','*');
  //合并响应头,设置返回数据的格式以及编码格式,并发送给客户
  res.writeHead(200,{'Content-type':'text/plain;charset=utf-8'});
  //发送数据给客户端(只能是字符串格式)
  res.write(JSON.stringify(result));
  //结束响应
  res.end();
});
//监听端口,并且提升启动信息
server.listen(5000,()=>{
  console.log('服务器启动成功,http://localhost:5000');
});

启动服务器node 文件名，在浏览器中打开http://localhost:5000
成功会出现我们创建的假数据

limit for me

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在js中创建ajax

在js中创建ajaxxhr.html页面四步法<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style></style></head><body> <script> //1.(创建异步对象) //兼容性的创建对象,在非低版本IE下存在
复制链接

扫一扫