了解及使用AJAX（JS原生ajax）

最新推荐文章于 2022-04-10 22:52:56 发布

ꪤ、匿名

最新推荐文章于 2022-04-10 22:52:56 发布

阅读量303

点赞数 1

文章标签： ajax http javascript 前端 1024程序员节

本文链接：https://blog.csdn.net/jjjh968/article/details/120207282

版权

1.什么是AJAX？

AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示

jQuery为我们将原生ajax进行了封装，现在我们只需要一行简单的代码，就可以实现 AJAX 功能。

对AJAX的印象：

AJAX是异步的JavaScript和XML;

AJAX是一种用于创建更好更快以及交互性更强的Web应用程序的技术;

AJAX是一种独立于Web服务器软件的浏览器技术;

AJAX不是一种新的编程语言，而是一种技术;

AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据（前端后台交互）;

AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求）。

javascript与xml作用：

1.javascript 负责向服务器请求

2.xml负责封装数据

使用ajax原因：

如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。这就是Web的运作原理：一次HTTP请求对应一个页面。

如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。

2.ajax的组成

ajax由 JavaScript xml css XMLHttpRequest 组成，ajax核心技术是XMLHttpRequest对象（简称XHR）

Ajax工作原理

　　Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

　 Ajax（Asynchronous javascript and xml），实现了客户端与服务器进行数据交流过程。使用技术的好处是：不用页面刷新，并且在等待页面传输数据的同时可以进行其他操作。

3、ajax的使用认识

jquery 是JS的一个框架，JS是网页的脚本语言，AJAX是指一种创建交互式网页应用的网页开发技术。

Ajax 的最大的特点：

1. Ajax可以实现动态不刷新（局部刷新）

2. readyState 属性状态有5个可取值： 0 = 未初始化，1 = 启动， 2 = 发送，3 = 接收，4 = 完成

Ajax 同步和异步的区别:

1. 同步：提交请求 -> 等待服务器处理 -> 处理完毕返回，这个期间客户端浏览器不能干任何事（同步调用会阻塞代码的执行，异步不会）

2. 异步：请求通过事件触发 -> 服务器处理（这是浏览器仍然可以作其他事情）-> 处理完毕

（ajax.open方法中，第3个参数是设同步或者异步。下面XMLHttpRequest有介绍）

（异步调用，会将读取到的任务下达到任务队列中，知道任务执行完成才会回调）

Ajax的局限性

1.无法跨域（当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域）

2.对搜索引擎抓取不利,它可能破坏浏览器的后退与加入收藏书签功能

4、对xml html xhtml的认识

XML是可扩展标记语言

html 是超文本标记语言

XHTML 是扩展超文本标签语言

XHTML是HTML向XML的一个过渡语言。它比HTML严谨性会高点。HTML的作用是显示数据，XML的作用是传输和存储数据。

html语言本身是有一些缺陷的
（1）不能自定义标签
（2）html本身缺少含义
（3）html没有真正的国际化

有一个中间过渡语言,xhtml：
html->xhtml->xml

XHTML 与HTML的不同：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

5、HTTP

超文本传输协议(HyperText Transfer Protocol)规定了Web浏览器如何从Web服务器获取文档和向Web服务器提交表单内容，以及Web服务器如何响应这些请求和提交。通常，HTTP并不在脚本的控制下，只是当用户单击链接，提交表单和输入URL时才发生。但是，用JavaScript代码操纵HTTP是可行的。

1) HTTP请求 HTTP请求方法或动作正在请求的URL 请求头集合，其中可能包含身份验证信息(可选) 请求体(可选)

2) HTTP响应一个数字和文本组成的返回码，用来显示请求的成功和失败一个响应头集合响应体

6、XMLHttpRequest

浏览器在XMLHttpRequest类上定义了它们的HTTP API,这个类的每个实例都表示一个独立的请求/响应对，并且这个对象的属性和方法允许指定请求细节和提取响应数据。

很多年前Web浏览器就开始支持XMLHttpRequest，并且其API已经到了W3C指定标准的最后阶段。同时W3C正在指定“2级XMLHttpRequest”标准草案。

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

6.1.XMLHttpRequest使用方法

1.创建XMLHTTPRequest对象

var request = new XMLHttpRequest();

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

open() 参数：

1.指定HTTP方法或动作，这个字符串不区分大小写，通常大家用大写字母来匹配HTTP协议。

取值可以为：GET/POST/HEAD/DELETE/OPTIONS/PUT

GET:用于常规请求，适用于URL完全指定请求资源，请求对服务器没有任何副作用，服务器的响应是可缓存的

POST:用于HTML表单，它在请求主体中包含额外数据，且这些数据常存储到服务器上的数据库中。相同URL的重复POST请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求。

2.URL,请求的主题，是相对于文档的URL。跨域请求会报错。

3.Boolean类型的值，如果值为false代表同步请求，send()方法将阻塞直到请求完成。如果这个参数是 true 或省略，请求是异步的。

request.open('get','https://api.muxiaoguo.cn/api/lishijr/')

3.设置requestHeader()请求头

在AJAX中，如果需要像 HTML 表单那样 POST 数据，需要使用 setRequestHeader() 方法来添加 HTTP 头。

然后在 send() 方法中规定需要希望发送的数据：setRequestHeader()方法需要在open()和send()方法之间调用。

语法

request.setRequestHeader(属性名称, 属性值);

常用的数据格式(编码可带可不带)

发送json格式数据

request.setRequestHeader('Content-type', 'application/json; charset=utf-8');

发送表单数据

request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');

发送纯文本(不指定Content-type时，此是默认值)

request.setRequestHeader('Content-type', 'text/plain; charset=utf-8');

发送html文本

request.setRequestHeader('Content-type', 'text/html; charset=utf-8');

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

send()

参数：

请求主体内容，如果没有，为null，或者省略。

request.send(); //调用send()之后,请求就会发送到服务器

5.取得响应，注册事件

发送请求后，会收到响应，收到响应后，XHR对象的以下属性会被填充上数据。

responseText：作为响应体返回的文本。
responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档。
status：响应的 HTTP 状态。
statusText：响应的 HTTP 状态描述。
readyState：返回HTTP请求状态

0 open()尚未调用 UNSENT
1 open()已调用 OPENED
2 接收到头信息 HEADERS_RECEIVED
3 接收到响应主体 LOADING
4 响应完成 DONE

readystatechange 请求状态改变事件当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发该事件

6.如果请求完成，并且响完成，可以获取到响应数据

<body>
  <button onclick="getData()">获取数据</button>
  <script>
    function getData(){
      //1.创建一个XMLHttpRequest的实例
      var request = new XMLHttpRequest()
      //2.open 使用open方法设置和服务器的交互信息
      request.open('get', 'https://api.muxiaoguo.cn/api/Gushici');
       // 3.requestHeader根据发送请求，设置对应的参数，如果默认可不设置requestHeader
      //  发送纯文本(不指定Content-type时，此是默认值)
      //  request.setRequestHeader('Content-type', 'text/plain; charset=utf-8');  

      //4.send
      request.send();
        // 5.如果请求完成，并且响应完成，获取到响应数据
        // readystatechange 请求状态改变事件
        // readyState ===4 	响应完成	 status === 200请求完成
    request.onreadystatechange = function () {
      if (request.readyState === 4 && request.status === 200) {   
        // responseText：作为响应体返回的文本。 （返回的是JSON字符串）   
        console.log(request.responseText);
        // 反序列化转换为JSON对象
        console.log(JSON.parse(request.responseText));
      }
    }

    }
  </script>
</body>

7.创建ajax的5个步骤

1.创建一个XMLHttpRequest的实例

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

3.设置请求头requestHeader（根据发送请求，设置对应的参数，如果默认可不设置requestHeader发送纯文本(不指定Content-type时，此是默认值)

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

5.如果请求完成，并且响应完成，获取到响应数据

8.常用请求引用

get、post无参请求使用方法一样，只列一个实例：

<script>
    //ajax
    //创建实例
    var xhr=new XMLHttpRequest();
    //打开一个链接   post无参请求，把get改为post
    xhr.open('get','http://47.93.206.13:8002/index/findAllCategory')
    //发送请求 
    xhr.send()
    //接受响应
    xhr.onreadystatechange=function(){
      if(xhr.readyState===4 && xhr.status===200){
        console.log(xhr.responseText)
      }
      if(xhr.readyState===4 && xhr.status===500){
        console.log('错误',xhr.responseText)
      }
    }
  </script>

get有参请求:

 //创建实例
    var xhr=new XMLHttpRequest();
    //打开一个链接  Qs为一个序列化库，外部引入
    var qs=Qs;
    var obj={
      page:1,
      pageSize:10
    }
    console.log(qs.stringify(obj))
    // 有参+？+字符串拼接,  get请求参数暴露在url
    //拼接以字符串形式，把对象序列化成字符串
    xhr.open('get','http://47.93.206.13:8002//index/pageQueryArticles'+ "?"+qs.stringify(obj))
    //发送请求 
    xhr.send()
    //接受响应
    xhr.onreadystatechange=function(){
      if(xhr.readyState===4 && xhr.status===200){
        console.log(xhr.responseText)
      }
      if(xhr.readyState===4 && xhr.status===500){
        console.log('错误',xhr.responseText)
      }
    }

post有参请求：

<button onclick="login()">登录</button>
<script>
  function login() {
    var request = new XMLHttpRequest();
    request.open('post','http://139.196.172.209:8888/user/login');
    var params = {
      password: "123321",
      username: "admin1"
    }
    // 登录接口Content-type为json格式
    request.setRequestHeader('Content-type','application/json;charset=utf-8');
    //转化为JSON格式字符串
    //send 发送参数，post携带参数在请求体里
    request.send(JSON.stringify(params))
    request.onreadystatechange = function () {
      if (request.readyState === 4 && request.status === 200) {
        console.log(request.responseText);
      }
    }
  }
</script>

ꪤ、匿名

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
了解及使用AJAX（JS原生ajax）

1.什么是AJAX？AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。对AJAX的印象：
复制链接

扫一扫