开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情

前言

ajax作为我们前端必会的一个东西今天我们就来总结一下ajax的基本使用

ajax的介绍

Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

这里提一下

ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。

AJAX 工作原理.

1.Ajax可使因特网应用程序更小、更快，更友好。
2.Ajax 是一种独立于 Web 服务器软件的浏览器技术。
3.Ajax 基于下列 Web 标准： JavaScript、XML、HTML与CSS在Ajax中使用的Web标准已被良好定义，并被所有的主流浏览器支持。
4.Ajax 应用程序独立于浏览器和平台。 Web 应用程序较桌面应用程序有诸多优势；它们能够涉及广大的用户，它们更易安装及维护，也更易开发。

ajax使用方法

url 表示请求的地址
type 表示请求的类型 GET 或 POST 请求
data 表示发送给服务器的数据

data格式有两种：

一：name=value&name=value

二：{key:value} success 请求成功，响应的回调函数

dataType响应常用的数据类型

text 为纯文本
xml 为 xml 数据 2） $.get 方法和$ .post 方法

数据接口

数据接口是后台程序提供的，它是一个url地址，访问这个地址，会对数据进行增、删、改、查的操作，最终会返回json格式的数据或者操作信息，格式也可以是text、xml等

2）`$.get` 方法和`$.post` 方法

url 请求的 url 地址
data 发送的数据
callback 成功的回调函数
type 返回的数据类型

$.get("/change_data", {'code':300268},
  function(dat){
    alert(dat.name);
});

$.post("/change_data", {'code':300268},
  function(dat){
    alert(dat.name);
});

3）$.getJSON 方法

url 请求的 url 地址
data 发送给服务器的数据
callback 成功的回调函数

// ajax--getJson 请求
$("#getJSONBtn").click(function(){
$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function
(data) {
$("#msg").html(" getJSON 编号：" + data.id + " , 姓名：" + data.name);
});
});

ajax的基本使用

前言