Ajax

最新推荐文章于 2024-06-20 09:53:57 发布

Zhweb_box

最新推荐文章于 2024-06-20 09:53:57 发布

阅读量162

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/ZiXiaweb/article/details/108967882

版权

js 专栏收录该内容

25 篇文章

订阅专栏

AJAX介绍

传统的web交换缺点：

流量损失
浪费时间和带宽

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
概念： ajax使网页异步刷新，在不重新加载整个页面时，对网页的局部进行刷新。
特点：局部刷新；

ajax的优点：

局部刷新；
优化了浏览器与服务器之间的传输，减少了不必要的数据返回，减少了带宽占用；
ajax引擎在客户端进行，承担部分服务器的工作，减少了服务器端的压力；

ajax的缺点
1.ajax不支持浏览器back按钮。
2.安全问题 AJAX暴露了与服务器交互的细节。
3.对搜索引擎的支持比较弱。
4.破坏了程序的异常机制。
5.不易调试。

ajax的使用方法

XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的基础。

1.创建XMLHttpRequest对象

var http=new XMLHttpRequest();

2.建立联系 open

open(method,url,async)

method：请求的类型；GET 或 POST get(获取数据) post（新建、增加数据） put（更新、修改数据、删除数据）
url：文件在服务器上的位置（地址：远程地址和本地地址）
async：true（异步）或 false（同步）默认为true ，异步； false 为同步。

同步和异步的区别：等待请求完成之后在去执行
异步是：请求和后续代码同时执行

 http.open("get","./list/data.txt");

3.向服务器发送请求 send(content )

这个方法里面的参数可写可不写，写了是服务器传输数据 ,不写是请求数据。

 http.send();

send(string) 将请求发送到服务器。
string：仅用于 POST 请求

4.获取服务器响应的数据（使用事件）

onreadystatechange
responseText：获得字符串形式的响应数据。
response和responseText 的用法一样。
readyState ：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

  http.onreadystatechange=function(){
      /* console.log(http.response);  //数据
        console.log(http.readyState);*/  //读物的状态码  0 1 2 3 4
  if(http.readyState==4){
      var ajax1=JSON.parse (http.responseText);  //json转化字符串
    //  var ajax1=JSON.parse (http.response);  //json转化字符串
      console.log(ajax1);
  }
}

5.渲染界面

ajax同步:

意味着此时请求服务器后，JS代码不再继续执行，等待服务器返回后才继续往下执行。

ajax异步:

意味着此时请求服务器后，JS代码继续执行，不管服务器什么时候返回。

什么是回调函数？

回调函数是另外某件事结束时执行的一个函数。在Ajax中，回调函数就是服务器对一个请求对象作出响应时调用的函数。浏览器会在某个时刻”回调”这个函数。

HTTP头部信息

每个HTTP请求和响应都会带有相应的头部信息，其中有的对开发人员有用，有的也没有什么用。
XHR对象也提供了操作这两种头部（即请求头部和响应头部）信息的方法。
默认情况下，在发送XHR请求的同时，还会发送下列头部信息：

Accept —— 浏览器能够处理的内容类型
Accept-Charset —— 浏览器能够显示的字符集
Accept-Encoding —— 浏览器能够处理的压缩编码
Accept-Language —— 浏览器当前设置的语言
Connection —— 浏览器与服务器之间连接的类型
Cookie —— 当前页面设置的任何
Cookie Host —— 发出请求的页面所在的域
Referer —— 发出请求的页面的URL。
User-Agent —— 浏览器的用户代理字符串

使用setRequestHeader()方法可以设置自定义的请求头部信息。
这个方法接收两个参数：
头部字段的名称
头部字段的值。
服务器在接收到这种自定义的头部信息之后，可以执行相应的后续操作。
要成功发送请求头部信息，必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()。

示例：

  //启动一个请求，以备发送
 xhr.open("get", "example.txt", true);   //异步请求
 xhr.setRequestHeader("MyHeader", "MyValue");
 //发送请求
 xhr.send(null);

调用XHR对象的getResponseHeader()方法并传入头部字段名称，可以取得相应的响应头部信息。
调用getAllResponseHeaders()方法则可以取得一个包含所有头部信息的长字符串。
示例：

var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeaders();