原生ajax底层原理

最新推荐文章于 2022-06-25 14:56:06 发布

原创最新推荐文章于 2022-06-25 14:56:06 发布 · 593 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#原生ajax原理 #原生ajax实现GET和POST请求

前端专栏收录该内容

2 篇文章

订阅专栏

传统方法的缺点

　　传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

什么是ajax

　　ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest 对象

　　XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest

方法	描述
abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")	返回指定首部的串值
open("method","URL",[asyncFlag],["userName"],["password"])	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码
send(content)	向服务器发送请求
setRequestHeader("header", "value")	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )

readyState的五种状态

请求尚未初始化, 已经创建了一个XMLHttpRequest对象
服务器链接已经建立, 已经调用了XMLHttpRequest对象的open方法，并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端
请求已经发送, 已经通过send方法把一个请求发送到服务器端，但是还没有收到一个响应
请求处理中, 已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收到
请求完成, 且响应已经就绪

请求步骤

　　1.创建XMLHTTPRequest对象

　　2.注册事件

3.使用open方法设置和服务器的交互信息

　　4.设置发送的数据，开始和服务器端交互

创建后台测试接口

为了测试，我实现了简单的ssm，创建了Controller层接口

请求连接为http://localhost:8080/myssm/test/test，入参为id=1

package com.controller;

import com.pojo.UserEntity;
import com.service.TestService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@RequestMapping("test")
@Controller
public class TestController {

    @Autowired
    private TestService testService;

    @RequestMapping("test")
    @ResponseBody
    public UserEntity test(String id){
        return testService.test(Integer.parseInt(id));
    }
}

原生ajax实现GET请求

    //创建XMLHttpRequest对象
    var xmlHttpRequest = new XMLHttpRequest();
    //重写onreadystatechange方法，状态改变就会调用，如果readyState==4&&xmlHttpRequest.status == 200，说明请求成功且有返回
    xmlHttpRequest.onreadystatechange = function(){
        if(xmlHttpRequest.readyState ==4 && xmlHttpRequest.status == 200){
            console.log(xmlHttpRequest.responseText);
            alert(xmlHttpRequest.responseText);
        }
    };
    //设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
    xmlHttpRequest.open('GET','http://localhost:8080/myssm/test/test?id=1');
    //发送ajax请求
    xmlHttpRequest.send();

原生ajax实现POST请求

    //创建XMLHttpRequest对象
    var xmlHttpRequest = new XMLHttpRequest();
    //重写onreadystatechange方法，如果readyState==4&&xmlHttpRequest.status == 200，说明请求成功且有返回
    xmlHttpRequest.onreadystatechange = function(){
        if(xmlHttpRequest.readyState ==4 && xmlHttpRequest.status == 200){
            console.log(xmlHttpRequest.responseText);
            alert(xmlHttpRequest.responseText);
        }
    };
    //设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
    xmlHttpRequest.open('POST','http://localhost:8080/myssm/test/test');
    //设置数据内容类型为application/x-www-form-urlencoded
    xmlHttpRequest.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    //发送ajax请求
    xmlHttpRequest.send('id=1');

使用原生Ajax实现的GET和POST请求的区别