原生ajax底层原理

传统方法的缺点

  传统的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的五种状态

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

请求步骤

  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请求的区别

  1. 请求方式不同,一个是GET,一个是POST
  2. 请求参数存放的位置,GET的请求参数直接拼接在url后面,POST的请求参数存放在body体中且需要设置请求数据类型为application/x-www-form-urlencoded
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值