Ajax简介

实际上ajax在开发中是必不可少的，因为除了刚开始下载页面外，其他的数据交互都是用它来进行的。

Asynchronouns Javascript And XML 异步JS和XML
是Javascript中能向服务器发送请求并获得响应的技术

作用：提高用户体验

传统的HTTP交互方式

Ajax进行HTTP交互后，更新部分页面

原生Ajax

XMLHttpRequest类

创建方法：

var xhr = new XMLHttpRequest();

常用方法：

open("请求方法","URL",是否异步) 打开网络连接
URL：是服务器的地址
请求方法：GET、POST
是否异步：true异步（推荐），false同步（会产生阻塞）
send("参数") 向服务器发送参数
一般用于POST方法，格式是：参数＝值＆参数＝值
GET方法参数是写在URL后面
onreadystatechange 监听网络状态的事件
onreadystatechange = function(){
//responseText就是从服务器发回的文字数据
}

常用属性：
readyState 网络状态
0 初始化，没有调用open
1 连接，调用了open
2 发送，调用了send
3 开始响应，数据没有完全发送
4 完成，数据发送完成
status 响应代码
200 ok
404、403、405、500...
responseText 响应的文字数据
注意：和Ajax进行交互的服务器必须用输出流的方式进行

Ajax的跨域访问问题

服务器的安全机制：
服务器默认情况下，只允许当前项目中页面的JS来访问项目中的服务器程序，其他项目的页面不允许访问。(让文件在电脑的任何地方都能的访问，并非只有服务器)
方式：
1. 让服务器允许页面访问
  响应对象.addHeader("Access-Control-Allow-Origin", "*");
2. JSONP

Jquery的Ajax

$.ajax(
{
    url:地址,
    type:请求方法类型,
    data:{参数:值,参数:值},
    async:是否异步true异步，false同步,
    success:function(响应的内容){
        成功后更新页面
    },
    error:function(){
        出现错误执行的代码
    }
})

//post方式
$.post(
    "URL",
    {参数:值,参数:值},
    function(响应内容){
        ...
    });
//get方式
$.get("URL+参数",
    function(响应内容){
        ...
    });

案例：使用ajax实现用户名是否存在提示

1）添加按用户名查询用户的方法
2）DAO、Serivice实现该方法
3）在UserServlet添加按用户名查询的方法，以流返回数据给ajax
4）在用户名输入框失去焦点时，调用ajax，将用户名进行判断
5）通过服务器返回的结果，提示用户

作业：完善后台管理系统

1）添加和更新用户时进行用户名验证
2）页面美化和完善保姆管理功能

Bootstrap自己从官网自学即可

来源：https://www.cnblogs.com/macht/p/11644877.html

标签

ajax

服务器类型

电脑服务器

用户名

ajax

Ajax简介

作用：提高用户体验

原生Ajax

创建方法：

常用方法：

常用属性：

Ajax的跨域访问问题

Jquery的Ajax

案例：使用ajax实现用户名是否存在提示

作业：完善后台管理系统