Three Ajax implementation methods and AJAX parsing JSON

php中世界最好的语言
Release: 2018-04-25 11:57:40
Original
2701 people have browsed it

This time I will bring you three Ajax implementation methods and AJAX parsing JSON. What are theprecautionsfor Ajax three implementation methods and AJAX parsing JSON? Here are practical cases, let’s take a look.

Preparation:

1、 prototype.js
2、 jquery1.3.2.min.js
3、 json2.js

Background processing program (Servlet), access path servlet/testAjax:

Java code

package ajax.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Ajax例子后台处理程序 * @author bing * @version 2011-07-07 * */ public class TestAjaxServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String name = request.getParameter("name"); String age = request.getParameter("age"); System.out.println("{\"name\":\"" + name + "\",\"age\":\"" + age + "\"}"); out.print("{\"name\":\"" + name + "\",\"age\":" + age + "}"); out.flush(); out.close(); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } }
Copy after login

TestAjaxServlet receives two parameters: name and age, and returns a JSONString written in format.

Front page parameter input interface:

Html code

显示区域

name:
age:

Copy after login

1. Prototype implementation

Html code

  
Copy after login

In the Ajax implementation of prototype, use the evalJSON method to convert the string into a JSON object.

2. jquery implementation

Html code

  
Copy after login

I’m new to jQuery, and I’m in json The processing is done with the help of json2.js. I also ask my seniors for advice. .

3. XMLHttpRequest implementation

##Html code

 
Copy after login

ps :Three ways to convert strings into JSON

During project development using Ajax, it is often necessary to return strings in JSON format to the front end, and the front end parses them into JS objects (JSON) .

ECMA-262(E3) did not write the JSON concept into the standard, but in ECMA-262(E5) the concept of JSON was officially introduced, including the global JSON object and the Date toJSON method.

1, eval method analysis, I am afraid this is the earliest analysis method.

function strToJson(str){ var json = eval('(' + str + ')'); return json; }
Copy after login
Remember the parentheses on both sides of str.

2, the new Function form is quite weird.

function strToJson(str){ var json = (new Function("return " + str))(); return json; }
Copy after login
In IE6/7, when the string contains a newline (\n), new Function cannot parse it, but eval can.

3, use the global JSON object.

function strToJson(str){ return JSON.parse(str); }
Copy after login
Currently IE8(S)/Firefox3.5/Chrome4/Safari4/Opera10 has implemented this method.

When using JSON.parse, you must strictly abide by the JSON specification. For example, attributes need to be enclosed in quotation marks, as follows

var str = '{name:"jack"}'; var obj = JSON.parse(str); // --> parse error
Copy after login
name is not enclosed in quotation marks. When using JSON.parse, all browsers will throw Exception, parsing failed. The first two methods are fine.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

jQuery creates a vertical translucent accordion effect

jquery implements the navigation menu mouse prompt function

The above is the detailed content of Three Ajax implementation methods and AJAX parsing JSON. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!