js-ajax(js)

muzidigbig

已于 2023-03-22 10:54:49 修改

阅读量2.6k

点赞数 2

分类专栏： ajax 文章标签： ajax XMLHttpRequest onreadystatechange

于 2018-07-03 11:03:11 首次发布

本文链接：https://blog.csdn.net/muzidigbig/article/details/80894907

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、Ajax概述

1．什么是同步，什么是异步

同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态（不能进行其他操作）

异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死（可以进行其他操作）

2．Ajax的运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。

二、js原生的Ajax技术

js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有如下几个步骤：

1. 创建异步对象 var xmh=new XMLHTTPRequest();

2. 通过xmh对象离的open() 设置请求的url等参数 open(请求的方式，请求的url，async默认异步)和服务器简历连接

3. 构建请求所需的数据，并通过xmh对象的 send() 发送请求给服务器

4. 通过xmh对象的 onreadystatechange 事件监听服务器和你得通信状态（注册事件）

5. 在注册的事件中获取返回值并在页面中显示(responseText)

Post请求步骤也如上，只不过要修改open()请求方式

详解：

1.XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1．老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

var iable=new ActiveXObject("Microsoft.XMLHTTP");
兼容性写法：
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }else{// code for IE6, IE5 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

2.XMLHttpRequest 对象用于和服务器交换数据。

向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

方法

描述

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

· method：请求的类型；GET 或 POST

· url：文件在服务器上的位置

· async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

· string：仅用于 POST 请求

3.服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

responseText 属性

如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

4.onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 · 0: 请求未初始化 · 1: 服务器连接已建立 · 2: 请求已接收 · 3: 请求处理中 · 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

var iable=new ActiveXObject("Microsoft.XMLHTTP");

兼容性写法：
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }else{// code for IE6, IE5 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

案例：

get请求：请求的数据通过 url+？username=this.value&email=this.value

send()为空

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#" >
    <label for="name">姓名：</label><input type="text" name="username" id="name"><span id="reg"></span>
    <br>
    <label for="email">邮箱：</label><input type="email" name="email" id="email">
    <br>
    <input type="submit" value="提交">
</form>
</body>
<script>
    //document.getElementsByName("name属性所对应的值")
   var user = document.getElementsByName("username")[0];
    user.onblur = function () {
//        alert(this.value);//获取当前的输入值
        var url = './04.php?username=' + this.value;
        var reg = document.getElementById("reg");
        //1.创建ajax对象
        var ajaxobg = new XMLHttpRequest();
        //2.打开请求的方式及路径数据
        ajaxobg.open('get',url,true);
        //3.发送数据  get请求为空,send()发送数据只为post发送请求数据
        ajaxobg.send(null);
        //4.响应事件
        ajaxobg.onreadystatechange = function () {
            //5.通过响应的状态来确定是否响应成功
            if(this.readyState==4 && this.status==200){
                if(this.responseText==0){
                    reg.innerHTML = '<span color="green">可用</span>';
                }else {
                    reg.innerHTML = '<span color="green">已被占用</span>';
                }
            }else {
                alert("响应未成功！")
            }
        }
    }
</script>
</html>

setRequestHeader('Content-Type','application/x-www-form-urlencoded');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#" method="post">
    <label for="username">用户名：</label><input type="text" id="username" name="username">
    <br>
    <label for="password">密&emsp;码：</label><input type="password" id="password" name="password">
    <br>
    <input type="submit" value="登录">
</form>
</body>
<script>
    document.getElementsByName("form")[0].onsubmit = function () {
        var inps = document.getElementsByTagName("input");
        //1.创建提交数据的异步对象
        var ajaxobj = new XMLHttpRequest();
        //2.打开请求的路径、同步还是异步
        ajaxobj.open('post','后台接口路径',true);

        //3.post请求需要设置请求头，原因：未设置返回来的是一个空Array数组
        ajaxobj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        //4.发送请求，post请求的数据在send函数中(多个请求数据之间用&进行连接)
        ajaxobj.send('username='+inps[0].value+'&password='+inps[1].value);
        //5.请求成功后会触发一个事件
        ajaxobj.onreadystatechange = function () {
            //通过readyState/status判断是否响应成功   this指当前响应
            if(this.readyState == 4 && this.status == 200){
                //接受响应过来的字符串
                var text = this.responseText;
                //将后台返回的字符串变成js对象   eval()
                var res = eval('('+text+')');
                //后面把对象中的数据动态的绑定到dom中
                //略……

            }
        }
    }
</script>
</html>

转换成js对象后打印出的对象格式：

后台返回给前台text是一段html代码；前台通过onreadystatechange接收到响应之后直接通过innerHTML输出到页面，浏览器会直接帮我们解析：

不常用

补充知识：

JSON 解析和生成

在 JavaScript 中，有两个方法与此相关： JSON.parse 和 JSON.stringify

<script>
    var str = '{"name":"muzidigbig","age":22}';
//    JSON.parse(string);将符合json语法规则的字符串转换成obj对象
    var obj = JSON.parse(str);
    console.log(obj);
//    JSON.stringify(obj);将obj对象转换成json字符串
    var jsonstr = JSON.stringify(obj);
    console.log(jsonstr);
    console.log(typeof jsonstr);
</script>

Json格式在线校验：https://www.json.cn/

get和post有什么区别？

1.get一般是获取数据，post一般是提交数据

2.get参数会放在url上，所以安全性比较差，post是放在body中

3.get请求刷新服务器或退回是没有影响的，post请求退回时会重新提交数据

4.get请求时会被缓存，post不会

5.get请求会被保存在浏览器历史记录中，post不会

6.get请求只能进行url编码，post请求支持很多种

若有不足请多多指教！希望给您带来帮助！

muzidigbig

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
js-ajax(js)

一、Ajax概述1．什么是同步，什么是异步同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态（不能进行其他操作）异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死（可以进行其他操作）2．Ajax的运行原理页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提...
复制链接

扫一扫