JQ与Ajax学习心得（一）

最新推荐文章于 2021-08-05 14:44:47 发布

挑战昵称长度222222222

最新推荐文章于 2021-08-05 14:44:47 发布

阅读量252

点赞数

分类专栏：笔记文章标签：前端 JQ ajax

本文链接：https://blog.csdn.net/colder_2019/article/details/99777176

版权

本文探讨了Ajax的核心特点——异步刷新，以及在前端开发中如何利用JS和JQuery实现Ajax请求。通过XMLHttpRequest对象的方法如open、send和setRequestHeader详细解释了Ajax的工作流程。同时，文章还提供了JS实现Ajax的封装代码示例，包括GET和POST两种方式，以助于开发者更好地理解和应用这些技术。

摘要由CSDN通过智能技术生成

一.ajax特点 :异步刷新 ,只刷新需要修改的内容，其他内容保持不变，例如百度搜索，视频点击等，请求转发/重定向都属于全局刷新。

二.实现方式 : JS | Jquery

三.XMLHttpRequest :

1.XMLHttpRequest对象的常用方法 :

(1)open(‘get | post’,‘请求地址’,true) :客户端访问服务器建立的连接是通过open() ；true表示异步刷新

(2)send() :分为get 或 post 两种情况 : get方式不需要填写参数；post方式，里面填写要传给服务器的数据。

(3)setRequestHeader() :分为get 或 post 两种情况 : get方式不需要填写参数；post方式分为两种情况：a.如果请求中包含文件:(3)setRequestHeader (‘Content-Type’,‘multiparty-form-data’);
b.如果请求中不包含文件：(3)setRequestHeader (‘Content-Type’,‘application/x-www-form-urlencoded’);

2.XMLHttpRequest对象的常用属性 :
a.readyState: 请求状态 ,当readyState的值为4 时，才有效
b.status: 响应状态 200 表示成功；
c.onreadystatechange(): 是一个回调函数，用来监听状态码的变化，并做出相应的执行事件

四.JS实现 ajax的封装 :
以登录注册为例 :

<!--html代码-->
用户：<input type='text' id='user'>
密码：<input type='text' id='pass'>
<button id='btn'>登录</button>

以下是封装代码,和上面的html代码放在同一个文件里

<script>
  btn.onclick = function()
  {
   
     ajax({
   
       type:'get | post',
       url:'http://localhost:9217',
       data:{
   
         user=user<