AJAX

常识:

同步与异步

同步:发送请求和响应请求会同时在线。
异步:发送多个请求,回调函数会响应结果(success or error),不会同时占线。 

 局部刷新

刷新网页页面的时候,只会更新页面的某一小块数据,而不需要更新整个页面。

GET请求 和POST请求 对比

性能:GET的性能比POST更好
缓存:GET能够缓存文件,而POST每次都必须从服务器更新数据。
数据量:GET发送的数据参数有大小限制(2048个字节),而POST没有这个限制,可以利用它来发送大量数据参数。
安全性:GET发送的参数是明文的,而POST发送的参数放在send方法内被加密,更加安全。

但通常来讲,若不是为了传输敏感数据,或参数会比较长的数据,我们都尽可能的会用GET方法,只因为它的性能比POST更优。

属性描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

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

200: "OK"

404: 未找到页面


一、概述

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 是与服务器交换数据,能实现动态网页技术,可以实现局部刷新。

AJAX最大的特征:实现了局部刷新与异步调用

原生JS 创建AJAX步骤

1. 创建    XMLHttpRequest    对象

2. 向服务器发送请求     GET 请求  POST 请求   请求的数据可以是各种各样的 .json  .asp  .text  .php 等等

3. 响应事件  (onreadystatechange)

4. 响应状态   (readyState)  

步骤1:

    var xmlhttp; //全局对象的变量
    if (window.XMLHttpRequest) //判断浏览器的兼容性
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
        xmlhttp=new XMLHttpRequest(); //新建一个对象
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  //兼容,但实际运用中使用JQuery
    }

    console.log(xmlhttp);

步骤2:

GET 请求
xmlhttp.open('GET','tsconfig.json',true);//请求的方式, 请求的URL  async:true(异步)或 false(同步)
xmlhttp.send();//向服务器发送请求



POST 请求
xmlhttp.open("POST","tsconfig.json",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("id=5&name=zhang"); //id是灵活的,对应于数据库表中的id,用户点击哪个传递哪个。

前后端如何实现交互的请求过程。

搜索框:  文件查询,模糊处理 like

 SVN

二、案例

1

原文地址:https://www.cnblogs.com/zhangzexiang/p/8706230.html