标签：刷新 request protect 没有 ESS js代码 document 接收 百度
1.概念
百度百科：Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术
W3C：AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 不是新的编程语言，而是一种使用现有标准的新方法
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
局部刷新、异步加载
2.使用场景：百度地图， 用户注册校验等
3.同步与异步
同步：发一次请求，需要等待服务器响应结束，然后才能发生第二次，每次刷新都是整个页面刷新
异步：发一次请求，无需等待服务器的响应，可以直接发送第二次请求。使用js来接收服务器响应，然后使用js进行局部刷新
4.优缺点
优点： 不需要插件、用户体检极佳、提示web程序的性能、减轻服务器和宽带的负担
缺点： 没有了前进后台功能
5.ajax简单使用
ajax核心对象：XMLHttpRequest
实现步骤：
第一步：创建XMLHttpRequest对象
第二步：打开与服务器的连接
第三步：发送请求
第四：处理响应
HTML页面js代码:
window.onload=function(){ var but =document.getElementById("but"); but.onclick = function(){ //第一步(创建XMLHttpRequest对象) var xmlHR = new XMLHttpRequest(); // 第二步(打开与服务器的连接) var method = "get" ; var url = "/JQuery_demo2/ajax1.do?name=jack" ; xmlHR.open(method, url); // 第三步(发送请求) xmlHR.send(); //第四步(处理响应) xmlHR.onreadystatechange = function(){ if(xmlHR.readyState == 4){ if(xmlHR.status == 200){ var text= xmlHR.responseText; alert(text); }}}}}
服务器servlet代码:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String method = request.getMethod(); System.out.println("请求 ：" + method); String name = request.getParameter("name"); System.out.println("参数 ：" + name); response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); out.write("响应成功!"); out.close(); }
4. jquery的ajax
①$.ajax(url,[settings])
最底层的ajax请求，功能是最完善的
<script type="text/javascript"> $(function(){ $("input").click(function(){ /* $.ajax(url,[settings]) $.ajax([settings]) settings参数 设置所有的参数 url : 发送请求的地址 data : 发送到服务器的数据，请求参数 type ：请求方式(get、post) success ：成功的回调函数 success(data, textStatus, jqXHR) dataType：服务器返回的数据类型 "xml": 返回 XML 文档，可用 jQuery 处理。 "html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。‘‘‘注意：‘‘‘在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载) "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 "text": 返回纯文本字符串*/ $.ajax({ "url" : "/JQuery_demo2/ajax2.do" , "data" : {"username":"admin1","password":"123456"}, "type" : "post", "dataType" : "text", "success" : function(data){ alert(data); } }); }) }); </script>
②$.get(url,[data],[fn],[type])
以get发送请求
<script type="text/javascript"> $(function(){ $("input").click(function(){ /* $.get() 格式 $.get(url,[data],[callback],[type]) 参数： url:待载入页面的URL地址 data:待发送 Key/value 参数。 callback:载入成功时回调函数。 type:返回内容格式，xml, html, script, json, text, _default。 请求只能是get请求，不适合发送中文数据 */ $.get( "/JQuery_demo2/ajax2.do", {"username":"jack","password":"lovelucy"}, function(data){ alert(data); }, "text" ) }) }); </script>
③$.post(url,[data],[fn],[type])
以post发送请求
<script type="text/javascript"> $(function(){ $("input").click(function(){ /* $.post(url, [data], [callback], [type]) 参数： url:发送请求地址。 data:待发送 Key/value 参数。 callback:发送成功时回调函数。 type:返回内容格式，xml, html, script, json, text, _default。 发生post请求 */ $.post( "/JQuery_demo2/ajax2.do", {"username":"lucy","password":"lovetom"}, function(data){ alert(data); }, "text" ) }) }); </script>
标签：刷新 request protect 没有 ESS js代码 document 接收 百度
原文地址：https://www.cnblogs.com/jjqq0921/p/10193792.html
