Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

jQuery plug-in jQuery-JSONP development ajax call using considerations


May 08, 2021 JSON


Table of contents


jQuery-JSONP is a jQuery plug-in that supports JSONP calls, using it because it supports errors A JAX callback, while jQuery's $.ajax is not supported.

JSONP calls the sample code:

The code is as follows:
var originImgSrc = 'cnbogs-logo.gif';
$.jsonp({
    url: '',
    data: { imgSrc: originImgSrc },
    callbackParameter: "callback",
    success: function (newImgSrc, textStatus, xOptions) {
        console.log(xOptions.data.imgSrc);
    },
    error: function (xOptions, textStatus) {
    }
});

The first place to note is callback Parameter, if there is no dedicated callback function, be sure to write "callback";
The second thing to note is that in the success callback function, you get the undefined directly from the variable name originImgSrc, which you need to get through xOptions.data.imgSrc.

JavaScript, jQuery and Ajax

A brief summary:

1, JS is a front-end language.

2, Ajax is a technology, it provides an asynchronous update mechanism, using the client and server to exchange data between the entire page document, to achieve local page updates.

3, jQuery is a framework that encapsulates JS to make it easier to use. jQuery makes JS and Ajax easier to use


Details:

In fact, only one of them is a programming language.

Javascript is a programming language that is primarily used in Web pages to make Web sites interactive. W hen a browser analyzes a Web page, it creates a memory representation of the Web page. I t is a tree structure that contains all the elements on the page. T herefore, there is a root element that contains the head and body elements, which contains other elements, and it contains other elements. S o it looks basically like a tree. N ow, with javascript, you can use this tree to manipulate the elements in the page. Y ou can select an element by its id (getElementsById) or their tag name (getElementsByTagName) or simply traversing the tree (parentNode, firstChild, lastChild, nextSibling, previousSibling, and so on). O nce you have elements available, you can modify them by changing their appearance, content, or location on the page. T his interface is also known as DOM (document object model). A s a result, you can use javascript to do everything other programming languages can do, and by embedding it in wepages, you can also get the memory object of the current page, which you can make changes to the page interactively.

AJAX is a technique for communicating between browsers and servers within a page. C hat is a good example. Y ou write a message, send a message, and force other messages without leaving the page. Y ou can use the xmlhttp object provided by your browser to manage this interaction with javascript on the client side.

jquery is a library designed to simplify client web development in general (the other two above). I t creates an abstraction layer so that you can reuse common languages such as css and html in javascript. I t also includes features (AJAX) that can be used to communicate with the server. I t's written in Javascript and doesn't do everything for you, it just makes common tasks easier. I t also hides some of the browser's misunderstandings and errors.

To summarize:

Javascript is a programming language (objects, arrays, numbers, strings, calculations)

AJAX and jQuery use Javascript

jQuery is used to simplify common tasks using AJAX and page actions (styles, animations, etc.).

Finally, take an example of syntax:

// javascript 中的页面操作
var el = document.getElementById("box");
el.style.backgroundColor = "#000";
var new_el = document.createElement("div");
el.innerHTML = "<p>some content</p>";
el.appendChild(new_el);
// 以及如何在 jQuery 中执行此操作
$("#box")
.css({ "background-color": "#000" })
.append("<div><p>some content</p></div>");

1. javascript is a scripting language that is executed on the client side. a jax is a javascript-based technique that is primarily used to provide asynchronous refreshes (refresh only a portion of the page, not the entire page). One is language and the other is technology, and there is a fundamental difference between the two.

Javascript is a scripting language that executes on the browser side, and Ajax is a development technique for creating interactive web applications that leverage a range of related technologies, including javascript.

3. What can JavaScript do?

JavaScript can do a lot to make web pages more interactive and provide a better and more exciting experience for users of your site. JavaScript allows you to create an active user interface that gives users feedback as they navigate between pages.

Using JavaScript to ensure that users enter valid information in form can save you business time and expense.

JavaScript allows you to create custom HTML pages based on user actions.

JavaScript can also process forms, set cookies, instantly build HTML pages, and create Web-based applications.


What can JavaScript not do?

JavaScript is a client language. ( In fact, there is also a server-side version of JavaScript.) T hat is, it is designed to perform tasks on the user's machine, not on the server. As a result, JavaScript has some inherent limitations, primarily for the following security reasons:

1. JavaScript does not allow you to read or write files on the customer's machine. T his is good because you certainly don't want web pages to be able to read files on your hard drive, write viruses to your hard drive, or manipulate files on your computer. The only exception is that JavaScript can be written to a browser's cookie file, but there are some limitations.

2. JavaScript does not allow writing files on server machines. A lthough writing files on the server is convenient in many ways (such as storing page clicks or data for users filling out forms), JavaScript does not allow this. I nstead, the data needs to be processed and stored with a program on the server. This program can be a program written in languages such as Perl or PHP that runs on the server or a Java program

3. JavaScript cannot close a window that is not opened by itself. This is to prevent one site from closing windows at any other site and thus monologue the browser.

4. JavaScript cannot read information from an open Web page from another server. In other words, a Web page cannot read information from other windows that are already open, so it cannot probe which other sites surfers are still visiting.

What is Ajax?

Ajax is a way to create interactive web applications. A jax is an acronym for Asynchronou S JavaScript and XML (Asynchronous JavaScript and xml), a term pioneered by web developer JeSSe Jame S Garrett in early 2005. S trictly speaking, Ajax is only a small part of JavaScript (although this part is particularly popular). However, with frequent use, the term no longer refers to a technology itself (such as Java or JavaScript).

In most cases, Ajax typically refers to a combination of these technologies:

  • XMTML;
  • CSS (CaScading Style Sheet, Cascade Style Sheet);
  • DOM (Document Object Model, document object model) accessed using JavaScript;
  • XML, which is the data format that is transferred between the server and the client;
  • XMLHttpRequeSt, used to get data from a server.

The benefits of Ajax are:

Most of the application's processing occurs in the user's browser, and data requests to the server are often short. So you can use Ajax to build feature-rich applications that rely on web-based data, but whose performance far exceeds that of the old-fashioned method, which requires the server to send back the entire HTML page in response to user action.

Some companies have invested heavily in Ajax, especially Google. G oogle has built several well-known Ajax apps, including Gmail( web-based email), Google Calendar, Google DocS and Google mapS. A nother big Ajax supporter, Yahoo! , it uses Ajax to enhance personalized MY Yahoo portals, Yahoo Home, Yahoo Mail, and more. Both companies have opened their web applications to the public, which people can use to get maps and add interesting, useful or fun information to maps, such as the location of all Japanese restaurants in the Los Angeles area or the location of movie shoots.

1、JavaScript

Defined:

JavaScript is short for JS, a scripting language developed by Netscape, a scripting language widely used in client Web development that is commonly used to add dynamic functionality to HTML web pages (programs can be embedded in HTML or XML pages and interpreted directly in the browser).


Part:

Core (ECMAScript), Document Object Model, BROWSER Object Model, BOM

Describe:

Javascript is a new programming language that adapts to the needs of dynamic web page production and is now more widely used in Internet web web production.

Javascript is a scripting language, or descriptive language, developed by Netscape. On an HTML basis, Javascript allows you to develop interactive Web pages.

The emergence of Javascript enables a real-time, dynamic, and interactive relationship between web pages and users, enabling them to contain more active elements and more exciting content.

Javascript is short and sophisticated, but also executed on the client, greatly improving the speed of web browsing and interactive ability. It is also a simple programming language tailored specifically for web pages.

Mainstream javaScript frameworks are: YUI, Dojo, Prototype, jQuery...


2、Ajax

Defined:

AJAX, or "Asynchronous JavaScript and XML", is not an acronym, but a term created by Jesse James Gaiiett, a web development technique that creates interactive web applications.

AJAX is not a technology, it is actually several technologies, each of which has its own unique features, together become a powerful new technology.

Composition:

Based on XHTML and CSS standards;

Use Document Object Model for dynamic display and interaction;

Use XML and XSLT to do data interaction and operation;

Use XML HttpRequest to communicate asynchronously with the server;

Use JavaScript to bind everything.

Describe:

Ajax combines programming techniques such as Java technology, XML, and JavaScript to enable developers to build Java-based Web applications and break the management of using page overloading.

Ajax technology uses non-synchronized HTTP requests to pass data between Browser and Web Server so that Browser updates only some of the page content without reloading the entire page.

Ajax is a Web application development method that uses client scripts to exchange data with a Web server. T his allows Web pages to be updated dynamically without interrupting the interaction process to re-trim. With Ajax, users can create direct, highly available, richer, and more dynamic Web user interfaces that are close to local desktop applications.


3、jQuery

Defined:

jQuery is a fast, concise javaScript library that makes it easier for users to handle HTML documents, events, animate effects, and easily provide AJAX interactions for websites.

Characteristics:

Lightweight, chain syntax, CSS1-3 selectors, cross-browser, simple and easy to expand;

jQuery is a framework independent of server-side code, independent of ASP.NET or JAVA;

jQuery is currently a popular JavaScript framework, using CSS-like selectors, easy to operate HTML elements, with good scalability, with a number of plug-ins.

Describe:

For programmers, simplifying javascript and ajax programming can speed up project development by freeing programmers from designing and writing complex JS applications and shifting focus to functional requirements rather than implementation details.

For users, improve the visual effects of the page, enhance the interaction with the page, experience more gorgeous web material.

The javaScript framework is actually a series of tools and functions.