web前后端交互技术

jsp页面取值

jsp页面会包含很多html标签，通常与用户进行交互时会进行涉及页面取值样式修改以及一些js动作，以及前后端数据交互，这时就可以用到jQuery+ajax，首先介绍jq选择器的强大使用，接着介绍如何使用ajax进行前后端交互，最后我们讲一下jq和el语句的区别以及介绍一下el语句的使用.

jq选择器

所有的选择器都在这里啦
http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

ajax

1.首先ajax全称，asynchronous javascript and xml（异步JavaScript和xml）

2.ajax最大的特点是可以做到局部更新，可以不加载整个页面（这个具体是如何操作的？）

3.ajax运行原理：客户端响应某个事件，创建xmlHttpRequest实例对象，然后发送httpRequest请求，通过internet,到达服务端，服务端加工httpRequest请求，然后返回response对象和请求数据，再通过internet发送到客户端，客户端使用js解析加工数据，然后更新页面内容.

4.接下来我们要知道，我们发送的请求分两种同步和异步，一般不使用ajax默认都是同步，在这里我们要了解一个对象，xmlHttpRequest，这是一个js对象，客户端就是利用这个对象向服务器发送请求，它有两个方法，open（）和send（）

<script>
function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","/try/ajax/demo_get.php",true);
    xmlhttp.send();
}
</script>

xmlhttp.open(“type”,”url”,asyn);
xmlhttp.send();
参数说明：type值有get和post
url就是你的请求地址
asyn表示同步还是异步，true为异步false为异步
5.为什么要用异步方式
因为如果服务器繁忙应用程序就会被挂起也就无法向客户端发送响应数据这时客户端就没法进行js渲染加载数据，为防止堵塞采用异步方式，当服务器繁忙该请求没有得到响应就先等待但是可以执行其他js操作.

jq和ajax结合使用

1. $(“”).load()方法
   load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称

1. $(“”).get()方法

$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。

1. $(“”).post()方法

$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

4.callback()可以有3个参数
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });

5.以上写法都是简写版
上面的写法可以等价下面这个写法，下面这个写法参数不全，需要用到什么参数可以补上去

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

jq和el表达式的区别

第1点：jq："$()" ,el: "${}"，一个是圆括号，一个是花括号；
第2点：jq是在客户端浏览执行的语言，全称是JavaScript query，而el语句是在服务端执行的后台语言，详细的el用法可以见本文的最后关于el表达式使用的介绍

最后

以上就是聪慧摩托为你收集整理的web前后端交互技术的全部内容，希望文章能够帮你解决web前后端交互技术所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。